Follow up, I was on my phone before, this is what working with Vue typically looks like:

    <template>
        <p v-text="message" class="some-class">
        </p>
        <button v-on:click="reverseMessage">
        </button>
    </template>

    <script>
        export default {
            data() {
                return {
                    message: "Hello Vue.js!"
                };
            },
            methods: {
                reverseMessage(){
                    this.message = this.message.split('').reverse().join('');
                },
            },
        }
    </script>

    <style>
        .some-class{
            color: black;
        }
    </style>

The thing to note is that there are other objects which can be added to the component definition which add a lot of utility and keeps things standardized: created, mounted, computed, watch, etc. There's a bit of magic behind the scenes to make it work, but it's worth it for the standardization/organization in my opinion.