[Vue warn]: Property or method “rackNumber” is not defined on the instance but referenced during render

Question

I am working with signalR and Vue.js to update data in a view dynamically, without the need to update the site. This is because the information will be displayed on a TV.

However when I want to render the data I get the following error: Property or method "rackNumber" is not defined on the instance but referenced during render.

I'm pretty sure the error is due to document.addEventListener ('DOMContentLoaded'), so I'm just looking for an alternate way to write the same code, so that the site content loads first, and then it's waiting of the data that it will receive from the backend.

My code:

<template>
  <main class="principal">
    <div class="columns">
        <div  class="column is-one-fifth fixed">RACK: 
          <span class="number-tool" v-if='rackNumber'>{{ rackNumber }}</span>
        </div>
        <div class="column is-one-fifth fixed-2">Estado</div>
        <div class="column is-one-fifth fixed-1">BOX:
           <span class="number-tool" v-if='boxNumber'>{{ boxNumber }}</span>
        </div>
    </div>

script:

<script>
import Vue from 'vue';

const signalR = require('@aspnet/signalr');

document.addEventListener('DOMContentLoaded', () => {
  /* eslint-disable no-unused-vars */
  const app = new Vue({
  /* eslint-enable no-unused-vars */
    data() {
      return {
        rackNumber: '',
        boxNumber: '',
        connection: '',
        messages: [],
      };
    },
    methods: {
      submitRack() {
        if (this.rackNumber) {
          // ---------
          //  Call hub methods from client
          // ---------
          this.connection
            .invoke('SendMessage', this.rackNumber);
          this.rackNUmber = '';
        }
      },
      submitBox() {
        if (this.boxNumber) {
          // ---------
          //  Call hub methods from client
          // ---------
          this.connection
            .invoke('SendMessage', this.boxNumber);
          this.boxNumber = '';
        }
      },
    },
    created() {
      // ---------
      // Connect to our hub
      // ---------
      this.connection = new signalR.HubConnectionBuilder()
        .withUrl('http://localhost:100/#/Rack')
        .configureLogging(signalR.LogLevel.Information)
        .build();
      this.connection.start().catch(err => console.error(err.toSting()),
      );
    },
  });
});

Thank you!