get returned data to display inside of vue model

Question

I have a simple set of data that will come in from my method. I need the data to display inside of my vue model thats all which is inside an object or array. Honestly, any that works. Normally, just adding vm.array name or object name works on success but cannot get it to display.

new Vue({
  el: "#app",
  data: {
    mydata:{}
  },
  methods: {
    getTokenData(){
            $.ajax({
            url: "https://jsonplaceholder.typicode.com/posts/1",
   
            success: function (data, status) {

                alert("success");
                console.log(data);
                this.mydata=data;
              
  },
  mounted: function(){
   this.getTokenData();
  }
})

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

Answer 1

This might work well

new Vue({
  el: "#app",
  data() {
    return {
       mydata: {}
    }
  },
  methods: {
    getTokenData(){
           
           axios
            .get("https://jsonplaceholder.typicode.com/posts/1")
            .then((response) => {
               
                // this.mydata=data;
                if (response.status) {
                  this.mydata = response.data;
                   console.log("myData ===>", this.mydata);
                }
            });
     }
  },
  mounted: function(){
    this.getTokenData();
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<div id="app">
   title: {{mydata.title}}
   <br>
   body: {{mydata.body}}

 </div>