this.$refs에 값이 들어가는 시점이 언제인가요?

vue 버전은 3.0.0입니다

<template>

** orderStatusCategory는 객체를 담은 배열 형태로

[{code_value: CANCEL, code_text: 주문취소}, {code_value: REQUEST, code_text: 주문요청}...]

형태입니다. 그리고 orderStatusCategory는 api를 통해 비동기적으로 받아오고요

그래서 저는 orderStatusCategory에 값이 할당되면 this.$refs에도 값이 들어 있을 거라고 생각했는데 아무 값도 안 들어있습니다

mounted랑 메서드

위 코드에서 this.orderStatusCategory에 값이 들어왔는데도 불구하고 this.$refs에는 여전히 아무 값도 안 들어있습니다

근데 버튼을 클릭하면 그 때는 this.$refs에 정상적으로 DOM 요소들이 들어있습니다.

질문 1) 왜 이런 건가요? 정확히 언제 this.$refs에 값이 들어가는 거죠?

질문 2) v-for로 버튼을 만들었는데 이렇게 만든 버튼들마다 다른 CSS를 주고 싶을 때는 ref로 접근하는 게 최선이죠?(v-for 하는 배열은 고정된 게 아니고 api로 받아올 때마다 바뀝니다)

this.$nextTick(() => {
  console.log(this.$refs);
});
// 또는
await this.$nextTick();
console.log(this.$refs);