app.js

        Vue.config.ignoredElements = [
      'a-scene',
      'a-entity',
      'a-camera',
      'a-box',
      'a-ring',
      'a-asset-items',
      'a-assets',
      'a-cursor',
      'a-text',
      'a-light',
      'a-circle'
    ]
    function handlerClick(event){
      console.log('handlerClick');
      console.log(event);
      // event.target.object3D.position.x += 1;
    }

    function handlerMouseEnter(event){
      console.log('handlerMouseEnter');
      console.log(event);
      event.target.setAttribute('color', 'red');
      event.target.setAttribute('opacity', '1.0');
    }

    function handlerMouseLeave(event){
      console.log('handlerMouseLeave');
      console.log(event);
      
      event.target.setAttribute('color', 'red');
      event.target.setAttribute('opacity', '0.05');
    }
    
    // if ( flag == true) {
    //   console.log('value == true です');
    // }
    // if ( this.flag == false ) {
    //   console.log('value != true です');
    // }

    function opacitychange(){
      console.log('opacitychange');
      target = document.getElementById("op")
      targetText = document.getElementById("appText")
      target1 = document.getElementById("line1")
      target2 = document.getElementById("line2")
      target.setAttribute('color', 'red'),
      target.setAttribute('opacity', '1'),
      target.setAttribute('animation', 'property: components.material.material.opacity; from: 0; to: 1; dir: alternate; dur: 1000; loop: true')
      targetText.setAttribute('visible', 'true');
      console.log(target.getAttribute('animation')),
      target1.setAttribute('color', 'red');
      target1.setAttribute('visible', 'true');
      target2.setAttribute('color', 'red');
      target2.setAttribute('visible', 'true');
    }


    function handlerMouseEnter2(event){
      console.log('handlerMouseEnter');
      console.log(event);
      event.target.setAttribute('color', 'red');
    }
    function handlerMouseLeave2(event){
      console.log('handlerMouseLeave');
      console.log(event);
      event.target.setAttribute('color', 'red');
    }
    

var app = new Vue({
  el: '#app',
  data: {
    message: '',
    posts: null,
    time: null,
    name: '',
    flag: null,
  },
//   firestore:{
//     messages: firebase.firestore().collection("memos").get().then(response => {
//       console.log("hello");
  
//   }),
// },

 
mounted() {
    const config = {
      apiKey: "",
      authDomain: "",
      databaseURL: "",
      projectId: "",
      storageBucket: "",
      messagingSenderId: "",
      appId: "",
      measurementId: ""
  };
  // firebase.initializeApp(config);

  // Initialize Firebase
  firebase.initializeApp(config);
  let db = firebase.firestore();
  let flag ;

  db.collection('memos')
      .onSnapshot(function (querySnapshot) {
          for (let change of querySnapshot.docChanges()) {
              if (change.type === 'added') {
                  // データが追加された時
              }
              else if (change.type === 'modified') {
                  // データが変更された時
                  console.log("!!!!!!!!!");
                  location.reload();

            }
              else if (change.type === 'removed') {
                  // データが削除された時
              }
          }
      })    
  },

created() {
      axios.get('https://firestore.googleapis.com/v1/projects/protout-330b2/databases/(default)/documents/memos/japan'
      ).then(response => {
        console.log(response);
        console.log(response.data.fields.flag.booleanValue);
        console.log(response.data.fields.age.stringValue);
        // this.time = response.data.documents.createTime;
        this.allData = [];
        this.posts = response.data.fields.age.stringValue;
        console.log(this.posts);
        this.flag = response.data.fields.flag.booleanValue;
        console.log(this.flag)
        if ( this.flag ) {
          console.log('flag == true です');
          opacitychange();
        }
        else if(!this.flag){
          console.log('flag == false です');
        }
        });
    }
})

index.html

<!DOCTYPE html>
<html>
  <head>
    <title>製造ライン可視化ツール</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.18/vue.min.js"></script>

    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <!-- aframeの導入 -->
  <script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
  <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
  <!-- コアFirebase JS SDKは常に必要であり、最初にリストする必要があります -->
<script src="https://www.gstatic.com/firebasejs/7.20.0/firebase-app.js"></script>
<script src="https://unpkg.com/vue-firestore"></script>
<script src="https://Vuejs.org/js/Vue.js" charset="utf-8"></script>
<script src="https://www.gstatic.com/firebasejs/7.12.0/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.12.0/firebase-firestore.js"></script>



<!-- TODO: Add SDKs for Firebase products that you want to use
     https://firebase.google.com/docs/web/setup#available-libraries -->
<script src="https://www.gstatic.com/firebasejs/7.20.0/firebase-analytics.js"></script>

  <title>A=frame</title>
</head>
<body>
  <div id="app" >
   <!-- {{time}}<br>
   {{flag}}<br>
   {{posts}} -->
  <a-scene >
    <!-- 3Dモデル（gltfファイル） -->
    <a-assets>
      <a-asset-items id="bird" src="scene.gltf" position="1 0 0"></a-asset-items>
    </a-assets>
    <a-entity gltf-model="#bird" scale="0.01 0.01 0.01"></a-entity>
    <!-- ロボットアラーム -->
    <a-circle id = "op" opacity="0.0" color="#EF2D5E" blending="additive"
    position="-3.86 7.6 1.7" width="5" radius="0.5"
    scale="0.5 -0.5 0.37" rotation="-5.78 0.7 0">   
    <a-text font="ipam-msdf.json"
    font-image="ipam-msdf.png"
    negate="false" id="appText" visible ="false" color="red" align="center" baseline="bottom" width="12" 
    position="2.5 -2.5 0" scale="1 -1.5 0.37"
    :value="posts"
    ></a-text>
    <a-entity id = "line1" visible ="false"  line="start: 0.7 -0.84 0; end: 1.5 -2.21 0; color: red"position="0 0 0"
    ></a-entity>
    <a-entity id = "line2" visible ="false"  line="start: 1.5 -2.21 0; end: 3.5 -2.21 0; color: red"position="0 0 0"
    ></a-entity>
    </a-circle>
    <!--コンベアアラーム -->
    <a-box color="red" position="5.09 5.651 4.908" opacity="0.5"
    scale="2.24 -0.09 -0.47"
    depth="2" height="2" width="0.5"
    >
    <a-text font="ipam-msdf.json"
    font-image="ipam-msdf.png" wrapCount="10"
    negate="false" id="appText" visible ="true" color="red" align="center" baseline="bottom" width="12" 
    position="2.5 -2.5 0" scale="1 -1.5 0.37"
    :value="posts"
    ></a-text>
    <a-entity  visible ="false"  line="start: 0 0 0; end: 0.5 -30 -5; color: red"position="0 0 0"
    ></a-entity>
    <a-entity  visible ="false"  line="start: 0.5 -30 -5; end: 2 -30 -5; color: red"position="0 0 0"
    ></a-entity>
    </a-box>
    
    <a-camera
      position="0 10 10"
      cursor-visible="true"
      cursor-scale="5"
      cursor-color="#0095DD"
      cursor-opacity="1">
      <a-cursor></a-cursor>
    </a-camera>
    <!-- ディレクショナルライト（平行光源）の追加 -->
    <a-light
      type="directional"
      color="#FFF"
      intensity="0.5"
      position="-1 1 2">
    </a-light>
    <!-- アンビエントライトの追加（環境光） -->
    <a-light
      type="ambient"
      color="#FFF">
    </a-light>
  </a-scene>
</div>
    <script src="app.js"></script>

   
  </body>
</html>