how do i use property from within vue- to outside of vue-CodePudding

I am using vue2.5. I am simply trying to have a variable outside of vue (traditional javascript or jquery) access a property from the vue model. The property in this case is sun. I want the data that would be found in sun to display within Const planet. How can i make that work? I tried using const planet = $app.sun but that doesn't work. Not sure how to make this work. Please see my example

const planet=""
//document.getElementById("cat").append("myName");

new Vue({
  el: "#app",
  data: {
   earth:"this is a ball",
    sun:"s",

  },
  methods: {
    toggle: function(){
   this.sun="a ball of stars"


    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">

{{sun}}
<br>
<button v-on:click="toggle()">magic

</button>
<div id="planet">
</div>
</div>

CodePudding user response：

You can set Vue in variable and then access $data:

var vm = new Vue({
  el: "#app",
  data: {
     earth:"this is a ball",
     sun:"s"
  },
  methods: {
    toggle: function(){
      this.sun="a ball of stars"
    }
  }
})
const planet = vm.$data.sun
document.getElementById("cat").append(planet);

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  {{sun}}
  <br>
  <button v-on:click="toggle()">magic</button>
  <div id="planet">
  </div>
</div>
<p>outside of Vue</p>
<div id="cat"></div>