Vuejs несколько vue случаев, броски не определены

Question

Обновление: я попытался удалить вложенность, и она работает нормально. Это определенно должно быть гнездование. Но хотелось бы получить любую обратную связь, чтобы она заработала.

У меня есть приложение, использующее несколько экземпляров vuejs. Когда я пытаюсь загрузить определенное свойство экземпляра, он выдает неопределенную ошибку. Я провел последние пару часов, исследуя, но не мог найти причину этого. Ждем некоторых предложений.

Ошибка:

Свойство или метод "message" не определен в экземпляре, но на него ссылаются во время рендеринга. Убедитесь, что это свойство является реактивным либо в параметре данных, либо для компонентов на основе классов, инициализируя свойство.

Main. js

// Vue.js is already loaded
// there are some other instances of vuejs with unique names as `freeRegVueApp`.

    const freeRegVueApp = document.getElementById("freeRegVueApp") ? new Vue({
        el: '#freeRegVueApp',
        /**
         * some things we might want to pass around between components of the vueApp VUE instance
         */
        data:
            {
                message: 'Hello Vue!'
            },
        mounted:function(){
            this.method1(); //method1 will execute at pageload
        },
        methods:{
            method1:function(){
                alert('loaded');
            }
        },
    }) : null;

Registration.blade. php

<!-- Some instances of vuejs -->
<div id="someVueInstance">

    <div class="signupForm" id="freeRegVueApp">
       <p v-if="message"> @{{message}}</p>
    </div>
</div>

Может ли это быть потому, что я вкладываю vuejs экземпляров?