<div 
  x-data="page()" class="flex flex-col md:w-1/3"
>
  <button 
    @click="access()" class="mt-10 md:mt-32 w-2/3 justify-center flex bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
  >
    Access Data
  </button>
  <label class="block">Output: "<span x-ref="output"></span>"</label>
  <script type="text/javascript">
    function page() {
      return {
        message: "Hello world",
        access() {
          this.$refs.output.innerText = this.message;
        },
      };
    }
  </script>
</div>