vue js 초보입니다

vue js 환경에서 라디오 버튼으로 탭효과 처리를 만들어봤는데요

라디오 버튼이 3개가 있고 라디오 버튼 클릭하면 하단에 그에 맞는 박스가 노출되는 형태입니다

노출되는 방법은 v-if 같은걸로 하진 않았고 박스에 멀티 클래스 제어하는 방식으로 했습니다.

(기본은 display: none; 클래스 show가 추가되면 display: block;)


코딩 후 빌드해서 페이지 로드했더니 현상이...
라디오버튼 2를 클릭하면 박스1,3은 미노출, 박스2만 노출되어야 정상인데
박스1노출, 박스2노출, 박스3 미노출 상태가 됩니다.
웃긴 건 두번째 클릭부터는 정상으로 작동합니다.

처음 페이지 로드 or 새로고침 했을 때
첫번째 클릭시 비정상적으로 작동하고 두번째 클릭부터는 정상 작동하네요

그리고 편집기에서 소스를 이 부분에 영향 없게 수정 (예를 들어 주석을 단더던지 전혀 다른 부분 수정을 한다던지)해서
브라우저가 자동으로 다시 읽을 땐 영향이 없습니다. 해당 페이지 첫 로드나 새로 고침때만 그렇네요


pgr 에디터 특성상 들여쓰기는 안 이쁜 채로 그냥 넣을게요 양해 부탁 ^^;


[html]

꺽쇠를 넣었더니 pgr 에디터에서 그대로 안 나와서 왼쪽 꺽쇠는  [ 로 오른쪽 꺽쇠는 ]로 대체해서 넣었습니다


[div class="c-form-radio-wrap"]
                  [div class="c-form-radio"]
                    [input type="radio" name="radio-name" id="radio-id1" value="radioValue1" v-model="radioModel"]
                    [label for="radio-id1"]라디오버튼1[/label]
                  [/div]
                  [div class="c-form-radio"]
                    [input type="radio" name="radio-name" id="radio-id2" value="radioValue2" v-model="radioModel"]
                    [label for="radio-id2"]라디오버튼2[/label]
                  [/div]
                  [div class="c-form-radio"]
                    [input type="radio" name="radio-name" id="radio-id3" value="radioValue3" v-model="radioModel"]
                    [label for="radio-id3"]라디오버튼3[/label]
                  [/div]
                [/div]


                [div class="box1 show"]box1[/div]
                [div class="box2"]box2[/div]
                [div class="box3"]box3[/div]





[스크립트]

export default {
  data() {
    return {
      radioModel: 'radioValue1'
    }
  },
  watch: {
      radioModel(data){
        const box1 = document.querySelector('.box1');
        const box2 = document.querySelector('.box2');
        const box3 = document.querySelector('.box3');
        if(data == "radioValue1") {
          box2.classList.remove('show');
          box3.classList.remove('show');
          box1.classList.add('show');
        }
        else if(data == "radioValue2") {
          box1.classList.remove('show');
          box3.classList.remove('show');
          box2.classList.add('show');
        }
        else if(data == "radioValue3") {
          box1.classList.remove('show');
          box2.classList.remove('show');
          box3.classList.add('show');
        }
      }
    }
}




========================

원인이 무엇일까요