Basic store pattern example doesn't work about core HOT 4 CLOSED

You should use ref or reactive api to make the data is observed in v3.

from core.

The issue is that your this in increment is refering to the unproxied state object so vue does not track changes made through it.

Working version here

from core.

In Vue 2, plain objects are converted in-place to become reactive. But in Vue 3, due to the use of proxy-based reactivity system, the original object and the reactive proxy have different identities.

So:

import { reactive } from 'vue'

const a = { count: 0 }
const proxyA = reactive(a)

console.log(proxyA === a) // false

So in Vue 3, if you want to define a standalone reactive object, the recommended approach is to always explicitly wrap it with reactive at creation (and essentially never use the original object):

const store = reactive({
  state: {
    counter: 0
  },
  increment: function() {
    this.state.counter  ;
  }
})

from core.

this.state.counter ++

from core.