ref or computed is not working that the vue compontent embedded into markdown file

[285851937]

Describe the bug I wrote a vue3.0 component named "Test" want to embed it to markdown file. The component just contains an ref object/computed and a click event handler. click,increase the ref object's value and show the computed result on DOM. The problem is that when it be placed into VitePress's components dir, it works as will. But, to bring it to Components Library, it just appeared. When click it, the ref object's value can be changed, but "computed" won't be executed. In fact, the "computed" was executed only once when the page be loaded. PS: If the Components Library is imported into another VUE3.0 project, the "Test" component works as will.

To Reproduce step 1: create a simple component in vitepress project's compontents dir and embed it to an markdown file:

<template>
  <div @click="add">Test{{showMyRef}}</div>
</template>

<script>
import {ref,computed} from 'vue'

export default {
  name: "Test",
  setup(){
    const myRef = ref(0);
    const showMyRef = computed(()=>{console.log('computed:',myRef.value);return myRef.value});
    const add = ()=>{myRef.value ++;console.log('add:',myRef.value)}
    return{myRef,showMyRef,add}
  }
}
</script>

step 2: click it, it works as will and the log like this:

computed: 0
add: 1
computed: 1
add: 2
computed: 2
...

step 3: To bring it to Components Library and import it, the log like this:

computed: 0
add: 1
add: 2
add: 3
add: 4

Expected behavior The "computed" can work when component in library.

System Info

• vitepress version:0.7.4
• vite version:1.0.0-rc.9
• Node version:v12.8.1
• OS version:win 10 pro 19041.610

[kiaking]

I can't reproduce this issue. What is "Components Library"?

[285851937]

Hi~ "Components Library"= Some plugins for ui that be compressed to a package and published to npm repository. In my case, the docs and plugins has been separated in different projects. And the "Test.vue" is a part of the plugins. The "plugins project" be published to a private repository hosted by verdaccio. And via "npm install xxplugin" to install it to "docs project".

Here is the plugin "index.js":

import Test from './test/src/Test.vue'
const components = [ Test ];
const install = (app) => components.map(item => app.use({
    install: (app) => {
        app.component(item.name, item);
    }
}));
export default install;
export {
    Test
};

build script:

"lib": "vue-cli-service build --target lib --dest lib packages/index.js",

.vitepress/theme/index.js:

import DefaultTheme from 'vitepress/dist/client/theme-default'
import uiBase from '@ui/base'
export default {
    ...DefaultTheme,
    enhanceApp({app, router, siteData}) {
        app.use(uiBase);
    }
}

[kiaking]

Hmmm, I'm still not getting the issue. Maybe you're using ref or computed in a wrong way...?

Please provide reproduction code to keep this thread going 🙏 I can't reproduce the issue at the moment.

[285851937]

The Test.vue(A plugin of '@ui/base'):

<template>
<div @click="add">Test{{showMyRef}}</div>
</template>
<script>
import {ref,computed} from 'vue'
export default {
  name: "Test",
  setup(){
    const myRef = ref(0);
    const showMyRef = computed(()=>{console.log('computed:',myRef.value);return myRef.value});
    const add = ()=>{myRef.value ++;console.log('add:',myRef.value)}
    return{myRef,showMyRef,add}
  }
}
</script>

embed in a markdown file like:

<Test/>

[285851937]

But to bring the Test.vue file into "theme/components" dir, and in "enhanceApp"-->app.component('Test',Test). the vitepress can render the Test.vue and click it , the ref obj can be increase and show changes. And to install '@ui/base' into another Vue3.0 project, the Test.vue is working fine. so strange~

[kiaking]

OK, again, I can't reproduce the issue. Please provide actual reproduction project that I can run and test 🙏

[285851937]

@kiaking It's so sorry I have no repository，so, I send an email for you🙏🙏🙏

[kiaking]

Discussing in emails. Seems like it's about bundling issues, and not specific to VitePress (it might be for Vite). Closing this for now.