How do I add & use data that is within a Vue Template?

Question

I have a Vue project where I'm using the CDN method. However, I need to use the router functionality. Therefore, I found a very clear tutorial which explains how to set up routing withing having to use CLI & Webpack etc. https://www.mynotepaper.com/vue-js-routing-from-scratch-using-cdn-without-cli.html

I now have three routes like in the demo which update my view accordingly. However, I can't figure out how to add, access and thus use data. The below stops my app from working. the error says message is undefined.

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

Answer 1

I would declare a new component as follows:

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

Answer 2

Thanks to everyone for their help. Here is a working solution.

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