Simple component v-model not updating

So I'm finally trying to get my head into the Laravel using Vue scene.

For the life of me, I can't work out why this simple component v-model doesn't seem to be updating the on page content.

<template>
    <div class="row">
        <div class="col-12">
            <div id="card" class="card">
                <div class="card-header">
                    <h4>{{ header }}</h4>
                </div>
                <div class="card-body">
                    <input v-model="newItem" type="text" placeholder="title">
                    <hr>
                    ( {{ newItem }} )
                    <ul>
                        <li v-for="item in items" :key="item.id">{{ item.label }}</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name:"add-category",
        data(){
            return {
                header: 'Add Category',
                newItem: '',
                items: [
                    {id: 1, label:'TESTING 123'},
                    {id: 2, label:'TESTING ABC'},
                ]
            }
        },
        methods:{

        }
    }
</script>

No matter what text is added in the input, the content between the ( ) never updates and remains blank?

I was following this vue tutorial video here:https://vueschool.io/lessons/user-inputs-vue-devtools-in-vue-3?friend=vuejs

From what I can tell, it should be working?

Could this be a conflict related to Laravel potentially?

Any thoughts are much appreciated.

So it seems like my issue was with how I had my app.js setup, or should I say wasn't setup as it didn't seem to be using vue via Laravel rather via an include on the main html file.

So I have removed those includes and changed my app.js to the following and it all started working as expected!

require('./bootstrap')

// 1. Define route components.
const Home = { template: '<div>Home</div>' }
const About = { template: '<div>About</div>' }

import Welcome from './components/App.vue';
import CategoryList from './components/category/List.vue';
import CategoryCreate from './components/category/Add.vue';
import CategoryEdit from './components/category/Edit.vue';

// 2. Define some routes
const routes = [
    { path: '/', component: Home },
    { path: '/about', component: About },
    { path: '/welcome', component: Welcome },
    { path: '/category', component: CategoryList },
    { path: '/category/:id/edit', component: CategoryEdit },
    { path: '/category/add', component: CategoryCreate },
]

window.axios = require("axios");

import { createRouter,createWebHistory} from 'vue-router'
const router = createRouter({
    history: createWebHistory(process.env.BASE_URL),
    routes
})

window.Vue = require("Vue");

const app = Vue.createApp({})
app.use(router)
app.mount('#app')

So now my v-model updates as expected!