nuxt3でデータの書き換えを行う際に若干2系と違ったのでご紹介します。

前提知識

nuxt2では、下記のようにscript内に記述します。

<script>
export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    increment(){
      this.count++
    }
  }
}
</script>

上記をnuxt3のsetupに変換すると以下のようになります。

<script setup>
  const count = ref(0)
  const increment = () => count.value++
</script>

非常にスッキリしていますね。

今回の躓きポイント

要素をクリックした時に、@clickにてイベントを発火させて真偽の切り替えをする処理を書きました。
最初にダメだった例をご紹介します。
【NG】

<script setup lang="ts">
let dropActive = false;
const isActive = (): boolean => {
　　　dropActive = !dropActive;
   retrun dropActive;
}
</script>

上記では、動作しませんでした。
nuxt2では、以下のような記述で動作したと思ったので同じような感覚で書いたのですが上手くいかないようです。

<script>
export default {
  data(){
    return {
      dropActive : false
    }
  },
  methods:{
    isActive() {
      this.dropActive = !this.dropActive
    }
  }
}
</script>

動作した例

ポイントとしては、refをインポートして使うということのようです。

<script setup lang="ts">
import { ref } from "vue";

let dropActive = ref(false); 　// default
const isActive = (): boolean => {
  dropActive.value = !dropActive.value;
  return dropActive.value;
};
</script>

この書き方が正当なのかは定かではないですが、エラーなく期待通りの挙動になりました。