Why component does not hide after change computed property in Vue 3?

I migrate from Vue 2 to Vue 3 code. And I have a problem with computed properies.

html:

<div id="cartStatePopupApp" v-if="isShow"> <!-- v-show="isShow" does not work too -->
    <button v-on:click="change()">change</button>
    <span >{{ isShow }}</span>
</div>

js:

import { createApp } from '../../lib/vue/dist/vue.esm-browser.js';

const app = createApp({
    data() {
        return {
            isShowed: true,
        };
    },

    computed: {
        isShow() {
            debugger;
            return this.isShowed;
        }
    },

    methods: {
        change() {
            this.isShowed = !this.isShowed;
        }
    }
});

app.mount('#cartStatePopupApp');

Vue devtool show as change properties:

but component does not hide. How fix it? Any ideas

I don't think you can put v-if on the root element. I've provided a snippet below where it works, if you create a wrapper element.

const { createApp, ref } = Vue

const app = createApp({
    data() {
        return {
            isShowed: true,
        };
    },

    computed: {
        isShow() {
            debugger;
            return this.isShowed;
        }
    },

    methods: {
        change() {
            this.isShowed = !this.isShowed;
        }
    }
});

app.mount('#cartStatePopupApp');

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.4.8/vue.global.min.js"></script>

<div id="cartStatePopupApp">
  <div v-if="isShow">
    <button v-on:click="change()">change</button>
    <span >{{ isShow }}</span>
    </div>
</div>