Vue3 Property "_isVue" was accessed during render on Reactive preferences

[Blakeinstein]

Describe the bug
When updating a reactive preference, the change is not reflected. The console contains warning containing the above error.

To Reproduce
Steps to reproduce the behavior:

1. Setup a vue3 project (I am using vite-cli -> vue + typescript)
2. Install vue-preferences then create a reactive preference
3. Update the preference.
4. See console

Expected behavior
The value should have reactively updated without requiring a refresh.

Error

runtime-core.esm-bundler.js:38 [Vue warn]: Property "_isVue" was accessed during render but is not defined on instance. 
  at <Content> 
  at <App>
warn @ runtime-core.esm-bundler.js:38
get @ runtime-core.esm-bundler.js:6877
s.J @ preference-object.js:58
s.get @ preference-object.js:36
get @ preference.js:12
reactiveEffect @ reactivity.esm-bundler.js:42
get value @ reactivity.esm-bundler.js:876
get @ runtime-core.esm-bundler.js:3090
_sfc_render @ Content.vue:2

Desktop (please complete the following information):

• OS: Windows 11
• Browser Webview2 [edge]

• "vue": "^3.0.5",
  "vue-preferences": "^3.0.0"
  

Additional context
Here is what my code approx looks like, but I get the error on almost all instances of updating preference. To reflect the changes elsewhere. I need a full reload.

<button round @click="theme = theme == 'dark' ? 'light' : 'dark'">

<script>
computed: {
  theme: preference('activeTheme', { defaultValue: 'dark' })
}
</script>

I also tried the programmatic approach but the value doesnt update.

[joshmakar]

Describe the bug When updating a reactive preference, the change is not reflected. The console contains warning containing the above error.

To Reproduce Steps to reproduce the behavior:

1. Setup a vue3 project (I am using vite-cli -> vue + typescript)
2. Install vue-preferences then create a reactive preference
3. Update the preference.
4. See console

Expected behavior The value should have reactively updated without requiring a refresh.

Error

runtime-core.esm-bundler.js:38 [Vue warn]: Property "_isVue" was accessed during render but is not defined on instance. 
  at <Content> 
  at <App>
warn @ runtime-core.esm-bundler.js:38
get @ runtime-core.esm-bundler.js:6877
s.J @ preference-object.js:58
s.get @ preference-object.js:36
get @ preference.js:12
reactiveEffect @ reactivity.esm-bundler.js:42
get value @ reactivity.esm-bundler.js:876
get @ runtime-core.esm-bundler.js:3090
_sfc_render @ Content.vue:2

Desktop (please complete the following information):

• OS: Windows 11
• Browser Webview2 [edge]

• "vue": "^3.0.5",
  "vue-preferences": "^3.0.0"
  

Additional context Here is what my code approx looks like, but I get the error on almost all instances of updating preference. To reflect the changes elsewhere. I need a full reload.

<button round @click="theme = theme == 'dark' ? 'light' : 'dark'">

<script>
computed: {
  theme: preference('activeTheme', { defaultValue: 'dark' })
}
</script>

I also tried the programmatic approach but the value doesnt update.

Did you happen to get this to work?

[Blakeinstein]

@joshmakar Nope. I had to drop the feature entirely.

[atalagorria]

@Blakeinstein @joshmakar
Regarding the warning, I think it's because _isVue is used in Vue 2, but in Vue 3 we should be using __isVue. We should consider making a change there. Apart from the warning, are you having an issue because of that?

About the reactive property, I checked, and I couldn't make it work, but this is the workaround I found:

<template>
  <button :class="theme" @click="toggleDarkTheme">Change mode</button>
</template>

<script>
import { preference } from "vue-preferences";

preference("applicationTheme", { defaultValue: "default" });

export default {
  name: "App",
  data() {
    return {
      theme: "default",
    };
  },
  methods: {
    toggleDarkTheme() {
      preference("applicationTheme").set(
        preference("applicationTheme").get() === "default" ? "dark" : "default"
      );
      this.theme = preference("applicationTheme").get();
    },
  },
  mounted() {
    this.theme = preference("applicationTheme").get();
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

.dark {
  color: white;
  background-color: black;
}

.default {
  color: black;
  background-color: white;
}
</style>

Please, keep me posted on this.