Page Comparison

<template>
  <div class="font-bold">
    {{ testString }}
  </div>
  <div class="font-bold">
    {{ getHelloWorldText() }}
  </div>
  <template>
  <button type="button" class="rounded bg-indigo-500 py-1 px-2 text-xs font-semibold text-white shadow-sm hover:bg-indigo-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-500">Button text</button>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
    props: {
        // Type-Safe properties! 
        myComplexProperty: {
          type: Object as PropType<MyInterface>,
          required: true,
        }
    }, 
    emits: [],
    setup(props, { emit }) {

    },
})
</script>

<style scoped>

</style>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
    props: {
        // Type-Safe properties! 
        myComplexProperty: {
          type: Object as PropType<MyInterface>,
          required: true,
        }
    }, 
    emits: [],
    setup(props, { emit }) {
    const testString = ref<String>('Hello');
    
    function getHelloWorldText(): string{
      return `${testString.value} World`;
    }
    
    return { testString, getHelloWorldText },
    },
})
</script>

<style scoped>

</style>