Vue3でBuildするとwatchEffect()が動作しなくなる

はじめに

概要

Vue3でyarn run devを使用して動作確認したのち、yarn run buildを実行してyarn run previewを動作確認をするとwatchEffect()が動作しなくなったので、調査した時の個人的な備忘です

環境

• Vue3
• Typescript
• Vite
• Docker

調査

検証①

GithubのIssueに同じような問題が挙がっていたので確認
どうやらVueのバージョンが古いよう

package.json

  "dependencies": {
    "pinia": "^2.0.30",
-    "vue": "^3.2.45",
+    "vue": "^3.4.3",
    "vue-router": "^4.1.6"
  }

結果

変化なし...
どうやら違うよう

検証②

確認していたらどうやらwatchEffect()内で監視しているデータが正しく変更されていないよう
データを追っていくとselectタグ内でv-modelしている値をscriptタグ内でrefし忘れていた

hoge.vue(template)

<template>
    <select v-model="month" @change="changeMonth(month)" >
        <option v-for="monthFor in monthList" :key="monthFor" :value="monthFor">{{ monthFor }}月</option>
    </select>
</template>

hoge.vue(script)

<script setup lang="ts">
import { date } from '@/stores/date'
import { ref } from 'vue'

const dateStore = date()

const nowDate = new Date()
const thisMonth = nowDate.getMonth() + 1

- const month = dateStore.month
+ const month = ref(dateStore.month)

const monthList = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]

const changeMonth = (selectedMonth: number): void => {
    dateStore.setMonth(selectedMonth)
}

</script>

結果

buildしても動いた！

まとめ

単純な凡ミスでした笑
ただyarn run devで動いてbuildして動かなくなるのは謎ですね...