vue router.push gives an error 'Node.insertBefore: Child to insert before is not a child of this node'

Question

I'm using Vue composition API, I'm trying to route the user to the 'notfound' page, but everytime I use router.push it gives me an error in the console DOMException: Node.insertBefore: Child to insert before is not a child of this node. also RouterLinks works fine.

to reproduce the error you can go to: https://rest-countries-api.onrender.com/sdfsdf (sdfsdf part is to generate the error)

to see the full code : https://github.com/anas-cd/rest_api

pushing from : CountryView.vue

<template>
.. (all templates .vue have a root node so this is not the problem)
</template>

<script setup>
import { useRouter } from 'vue-router';
const router = useRouter();
router.push({ path: '/notfound' });
</script>

router index.js:

    {
        path: '/notfound',
        name: 'NotFound',
        component: NotFound,
        meta: {
            scrollPos: {
                top: 0,
                left: 0,
            },
        },
    },

Answer 1

after updating all packages the error message was more informative.

I had an await inside a ref() and it caused problems,

<script setup>
const data = ref(await apiCall()); // problem
</script>

<script setup>
const data = ref(null);       // no problem
data.value = await apiCall(); //
</script>