Vue3 Newbie Details

Vue 3 has been stable for quite some time. Many codebases are using it in production environments and everyone else will eventually have to migrate to Vue 3. I now have the opportunity to use it and log my bugs below which you may want to avoid.

#1 Deconstructing reactive data

Suppose you have a reactive object with a count property and a button to increment count .

<template>
  Counter: {{ state.count }}
  <button @click="add">Increase</button>
</template>

<script>
import { reactive } from "vue";
export default {
  setup() {
    const state = reactive({ count: 0 });

    function add() {
      state.count++;
    }

    return {
      state,
      add,
    };
  },
};
</script>

The above logic is fairly straightforward and works as expected, but you might leverage JavaScript deconstruction to do the following:

/* DOES NOT WORK AS EXPECTED */
<template>
  <div>Counter: {{ count }}</div>
  <button @click="add">Increase</button>
</template>

<script>
import { reactive } from "vue";
export default {
  setup() {
    const state = reactive({ count: 0 });

    function add() {
      state.count++;
    }

    return {
      ...state,
      add,
    };
  },
};
</script>

The code looks the same and should work based on our previous experience, but in fact, Vue’s reactive…