Vue js: How to use different components on different page views

Question

So far what I have read is that I need to make use of a single main layout page which loads the app.js file from which different components can be loaded and server. However, this is not what I need.

However, I do not want to have a single main layout page. I have an existing Vue 2 component and View which works fine. It uses a specific view. I now want to be able to include specific components onto other specific pages ie Page Two gets component X. Then component Z into Page Three etc etc. Each page is a Laravel view. When I attempt to do this, the template is visible in the view, however the methods do not work. As a test I did this basic component into its own page and the method does not work. It appears the click event is not working, as my console.log come back empty:

     <template xmlns="http://www.w3.org/1999/html">
        <div class="row">
            <p>{{message}}</p>
            <button v-on:click="reverseMessage">Reverse Message</button>
        </div>
    </template>
    
    <script>
        export default {
           
        data() {
            return {
                message: 'Hello Vue'
            }
        },
        methods: {
            reverseMessage: function () { 
                console.log('click Me');
                this.message = this.message.split('').reverse().join('')
            }
        }
     }
    
    </script>

My app.js file is this:

Vue.component('first-page', require('./components/first.vue').default);
Vue.component('second-page', require('./components/second.vue').default);

const app = new Vue({
    el: '#pageOne',
});

const appTwo = new Vue({
    el: '#pageTwo',
});