nuxt.js中反应性很奇怪的问题

Question

我正在将项目从vue.js迁移到nuxt.js，但是我遇到了一些与Nuxt的反应性非常奇怪的问题。基本上，我有从数据库获取数据并将其存储在数据属性中的代码，问题出在我的HTML中，我有一些与数据属性链接的胡须，但由于某种原因，它只是显示了我设置数据的默认值。我知道数据已更改，因为如果使用vue开发人员工具，我可以看到数据已更改。有人知道如何解决此问题吗？

index.vue-CSS：

<template>
  <div id="masterdiv">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js" integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ=" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.0/js/bootstrap.min.js" integrity="sha256-oKpAiD7qu3bXrWRVxnXLV1h7FlNV+p5YJBIr8LOCFYw=" crossorigin="anonymous"></script>
    <Header />
      <div id="section1" >
      <h1 data-lax-preset="fadeInOut zoomInOut" class="title lax" style="color:#53c875;">‎‏‏‎‎Hi, I'm Max. I build‏‏‎ amazing

        <br />‏‏‎ ‎
        <span class="describertext" style="font-size:32px !important">GAMES | WEBSITES | CIRCUITS</span>
        <span
     class="txt-rotate"
     data-period="2000"
     style="color:#53c875 !important"
     data-rotate='["games.","websites.","circuits."]'></span>
      </h1>
      <button @mouseover="vhover" @mouseleave="vnhover" @click="VMWORK" data-lax-preset="fadeInOut" class="btn btn-info lax vmwork"><i class="fas fa-eye" style="margin-right:5px;"></i>View my work</button>
    </div>
    <div id="section2" >
      <h2 class="lax subtitle" data-lax-preset="fadeInOut" style="color:#53c875;font-size:60px;">About Me</h2>
      <img src="headshot.png" class="lax" data-lax-preset="fadeInOut" width="120" height="120" style="margin-bottom:20px;"/>
      <p
        class="lax aboutText"
        data-lax-preset="fadeInOut"
        style="color:#53c875;font-size:16px; "
      >Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nisl pretium fusce id velit ut tortor pretium. Aliquet risus feugiat in ante metus. Etiam tempor orci eu lobortis elementum nibh tellus. Elementum eu facilisis sed odio morbi quis commodo. Amet consectetur adipiscing elit ut aliquam purus sit. Mi quis hendrerit dolor magna eget est lorem ipsum dolor. Etiam tempor orci eu lobortis elementum nibh tellus molestie nunc. Nibh tellus molestie nunc non blandit. Ultrices eros in cursus turpis massa.</p>
    </div>
    <div id="section3" >
      <h2 class="subtitle" style="color:#53c875;margin-bottom:20px;font-size:60px;">My Projects</h2>
      <!-- Page Content -->
      <div class="container">
        <div class="row">
           <div v-for="item in Titles" class="Project" :key="item.id">
           <a class="img-container">
            <img class="img-fluid ProjectImg" :src="item.Image" data-toggle="modal" :data-target="item.Modal"/>
           </a>
          </div> 
        </div>

      </div>

      <!-- /.container -->
    </div>
    <div id="section4" >
      <h2 class="subtitle" style="color:#53c875;font-size:60px;" >Contact Me</h2>

    <div class="messages"></div>

    <div class="controls">
        <div class="row">
            <div class="col-md-12">
                <div class="form-group">
                    <input id="form_email" type="email" name="email" class="form-control" placeholder="Your Email"
                    v-model="email" 
                    required="required" >
                    <div ></div>
                </div>
            </div>
            <div class="col-md-6">
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <div class="form-group">
                    <textarea id="form_message" name="message" class="form-control" placeholder="Your Message" 
                    v-model="message"
                    rows="4" required="required" ></textarea>
                    <div></div>
                </div>
            </div>
            <div class="col-md-12">
                <input type="submit" style="border-radius:5px !important" @click="SendEmail" class="btn  btn-primary col-md-12"

                >
            </div>
        </div>
    </div>
    </div>
    <!-- The Modal -->
    <div class="modal"  id="myModal">
      <div class="modal-dialog">
        <div class="modal-content" style="background-color:#071b45">
          <!-- Modal Header -->
          <img src="Game.jpg" alt />
          <hr>
          <h2 class="modal-title" style="margin-left:11px;color:#fff">{{ Titles[0].Title }}</h2>
          <!-- Modal body -->
          <div class="modal-body" style="text-align:left;">
            <p style="color:#fff">
              {{ Console }}
            </p>
          </div>

          <!-- Modal footer -->
          <div class="modal-footer">
            <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
          </div>
        </div>
      </div>
    </div>
    <div class="modal"  id="ARD">
      <div class="modal-dialog">
        <div class="modal-content" style="background-color:#071b45">
          <!-- Modal Header -->
          <img src="Ard.jpg" alt />
          <hr>
          <h2 class="modal-title" style="margin-left:11px;color:#fff">{{ Titles[1].Title }}</h2>
          <!-- Modal body -->
          <div class="modal-body" style="text-align:left;">
            <p style="color:#fff">
              {{ Arduino }}
            </p>
          </div>

          <!-- Modal footer -->
          <div class="modal-footer">
            <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
          </div>
        </div>
      </div>
    </div>
    <div class="modal"  id="SOAP">
      <div class="modal-dialog">
        <div class="modal-content" style="background-color:#071b45">
          <!-- Modal Header -->
          <img src="Soap.jpg" alt />
          <hr>
          <h2 class="modal-title" style="margin-left:11px;color:#fff">{{ Titles[3].Title }}</h2>
          <!-- Modal body -->
          <div class="modal-body" style="text-align:left;">
            <p style="color:#fff">
              {{ Soap }}
            </p>
          </div>

          <!-- Modal footer -->
          <div class="modal-footer">
            <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
          </div>
        </div>
      </div>
    </div>
    <div class="modal"  id="SWW">
      <div class="modal-dialog">
        <div class="modal-content" style="background-color:#071b45">
          <!-- Modal Header -->
          <img src="SWW_BIG.png" alt />
          <hr>
          <h2 class="modal-title" style="margin-left:11px;color:#fff">{{ Titles[2].Title }}</h2>
          <!-- Modal body -->
          <div class="modal-body" style="text-align:left;">
            <p style="color:#fff">
              {{ SWW }}
            </p>
          </div>

          <!-- Modal footer -->
          <div class="modal-footer">
            <button @click="GotoStarWars" data-dismiss="modal" class="btn btn-info">View</button>
            <button type="button"  class="btn btn-danger" data-dismiss="modal">Close</button>
          </div>
        </div>
      </div>
    </div>
    <link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
    />
    <footer style="background-color:#143a5a;height:100px;margin-top:-10px;">
      <h4 style="color:#fff;">MAXWELL CAMPBELL <span style="color:#53c875;">©2020</span></h4>
    </footer>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" integrity="sha256-h20CPZ0QyXlBuAw7A+KluUYx/3pK+c7lYEpqLTlxjYQ=" crossorigin="anonymous" />
  </div>
</template>
<script>
import Bound from 'bounds.js'
//import SendEmailService from '@/services/main'
import Swal from 'sweetalert2'

import lax from 'lax.js'

import anime from 'animejs/lib/anime.es.js';

import ScrollOut from "scroll-out";
// Initialize Firebase
//var ImagesList = ["images/Small/Ard_Small.jpg","images/Small/Game_Small.jpg","SWW_SMALL.png","Soap_Small.jpg"]
////////////////////////////////////////////////
//////////////////
import * as firebase from 'firebase/app'
import 'firebase/database'
import Header from "@/components/Header.vue";
export default {
  name: "home",
  components: {
    Header
  },
  data() {
    return {
      Arduino: 'Error',
      Titles: [
        { Title: 'Console', Image: 'Game_Small.jpg', Modal: "#myModal", Id: 0 },
        { Title: 'ByteBeat', Image: 'Ard_Small.jpg', Modal: "#ARD", Id: 1 },
        { Title: 'Star Wars Weather', Image: 'SWW_SMALL.png', Modal: "#SWW", Id: 2 },
        { Title: 'Soap', Image: 'Soap_Small.jpg', Modal: "#SOAP", Id: 3 },
      ],
      SWW: 'Error',
      Soap: 'Error',
      Console: 'Error',
      email: '',
      message: ''
    }
  },
  methods: {
    VMWORK(){
      document.getElementById("section3").scrollIntoView({behavior:"smooth"});
    },
    // async SendEmail() {
    //   const response = await SendEmailService.register({
    //     email: this.email,
    //     message: this.message
    //   })
    //   console.log(response);
    //   Swal.fire('Success', 'Your email is being processed', 'success')
    // },
    ReadData() {
      var test;
      return firebase.database().ref('/Json').once('value').then(test =(snapshot) => {
        var st = (snapshot.val() && snapshot.val().Projects);
        console.log(st);
        this.Titles[0].Title = st["0"].Title;
        this.Titles[1].Title = st["1"].Title;
        this.Titles[2].Title = st["2"].Title;
        this.Titles[3].Title = st["3"].Title;
        this.Soap = st["3"].Description;
        this.Arduino = st["1"].Description;
        this.Console = st["0"].Description;
        this.SWW = st["2"].Description;
      });
    },
    vhover(){
      console.log("button hover!");
      anime({
        targets: '.vmwork',
        scale: 1.2
      });
    },
    vnhover(){
      anime({
        targets: '.vmwork',
        scale: 1
      });
    },
    GotoStarWars(){
      console.log("SWW");
      this.$router.push({
        path: '/SWW'
      })
    }
  },
  mounted () {
    this.ReadData()
  }
};

</script>