vue-demi breaks composition-api template re-rendering (vue2)

Hello @antfu ,

I am currently working on a SPA using vue2 + options-api . This SPA imports another component library (vue2 + @vue/composition-api), which simply exposes a single vue component. The component library also uses @vueuse/core using vue-demi.

Here’s an example of the exported component of the library (can not share everything since it’s an company internal project)

<template>
  <div>
    <p>FOO: {{ blub }}</p> <!-- will stay false -->
    <button @click.stop="click">CLICK ME</button>
  </div>
</template>

<script>
import { defineComponent, ref } from "@vue/composition-api"
import { useLocalStorage } from "@vueuse/core"

export default defineComponent({
  setup: (props) => {
    const foo = ref(false)

    const storageLocale = useLocalStorage("some_key", "en-GB", {
    listenToStorageChanges: true,
      window,
    })

    return {
      foo,
      click: () => {
        console.log("before click", foo.value)
        foo.value = true
        console.log("after click", foo.value) // <-- will be true
      },
    }
  },
})
</script>

So basically everything works pretty good. But as soon as I add the useLocalStorage or any other composable from @vueuse/core, the template will not re-render as soon as the button was clicked. The ref value itself works, only the template does not update. I did a lot of debugging together with my colleague, and we figured out that the template will update, as soon as we get rid of all vue-demi based code.

Dependencies of the SPA:

"dependencies": {
    "vue": "^2.6.10",
    "@company/components": "1.0.0",
    "@vue/composition-api": "1.0.0-beta.25"
},
"devDependencies": {
  ... all other
}

Dependencies of the ComponentLibrary:

"dependencies": {
   "@vueuse/core": "4.0.10"
},
"devDependencies": {
  "vue": "^2.6.10",
  "@vue/composition-api": "1.0.0-beta.25"
  ... all other
}

Do you know what could be the issue here?

Kind regards, Lukas

[lstoeferle]

Removing the packages vue and @vue/vue-composition-api resolved the issue 👍. Thanks for your help 👏

[antfu]

@lstoeferle

Your snippet shows you are importing from @vue/composition-api instead of vue-demi, not sure if it’s the problem.

Can you also check the dist file to see if it bundles the code from @vue/composition-api? Thanks.