`import` fails initially

[Swivelgames]

When first loading the page, I get the following error:

Uncaught (in promise) ReferenceError: require is not defined
    at Proxy._sfc_render (MyDoc.md:109:24)
    at renderComponentRoot (runtime-core.esm-bundler.js:816:16)
    at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js:5701:46)
    at ReactiveEffect.run (reactivity.esm-bundler.js:178:19)
    at instance.update (runtime-core.esm-bundler.js:5814:51)
    at setupRenderEffect (runtime-core.esm-bundler.js:5822:5)
    at mountComponent (runtime-core.esm-bundler.js:5612:5)
    at processComponent (runtime-core.esm-bundler.js:5565:9)
    at patch (runtime-core.esm-bundler.js:5040:11)
    at mountChildren (runtime-core.esm-bundler.js:5284:7)

    ## Examples

    ```vue live
    <script lang="ts" setup>
    import { ref } from "vue";
    const test = ref(false);
    </script>

    <template>
        <button @click="test.value = !test.value">{{test}}</button>
    </template>
    ```

I'm using this in VitePress.

Interestingly enough, if I comment out the import statement in the Markdown file, and then uncomment it after it renders, the example works. This only fails when loading the example for the first time with import uncommented.

In other words, this works, as long as you uncomment the import statement afterward it loads:

    ## Examples

    ```vue live
    <script lang="ts" setup>
    // import { ref } from "vue";
    const test = ref(false);
    </script>

    <template>
        <button @click="test.value = !test.value">{{test}}</button>
    </template>
    ```