Javascript 如何添加&；是否使用Vue模板中的数据？

我有一个使用CDN方法的Vue项目。但是，我需要使用路由器功能。因此，我找到了一个非常清晰的教程，它解释了如何在不必使用CLI和Webpack等的情况下设置路由

我现在有三条类似于演示中的路线，它们相应地更新了我的视图。但是，我不知道如何添加、访问和使用数据。下面的内容阻止我的应用程序工作。错误显示消息未定义

var Home = {
    template: `
    <div>
        <div>
            {{message}}
        </div>
    </div>
    `,
    data: {
        message: 'Hello'
    }
};

var Home={
模板：`
{{message}}
`,
数据：{
留言：“你好”
}
};

我将声明一个新组件，如下所示：

Vue.component('Home', {
template: `<div><div>{{ message }}</div></div>`,
data() {
    return { message: 'hello' }
}
});

Vue.component（'Home'{
模板：{{message}}`，
数据（）{
返回{message:'hello'}
}
});

感谢大家的帮助。这里有一个有效的解决方案

var Home = {
    template: `
    <div>
        <div>
            {{message}}
        </div>
    </div>
    `,
    data() {
        return { 
          message: 'hello'
        }
    }
};

var Home={
模板：`
{{message}}
`,
数据（）{
返回{
留言：“你好”
}
}
};

尝试将数据改为函数data（）{return{message:'Hello'}}谢谢@ChrisLi的帮助。谢谢你的帮助。@ChrisLi你应该加上这个作为答案。