title: Passing axios data to view template
body: <p>I am creating a simple SPA using vue.js and axioz as a scripts (not cli, etc)</p>
  
  <p>So far I am able to pull data from a json then render and paginate the list,and when an item is clicked I am able to console log the data for the specific entry.</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;!--app--&gt;
  &lt;div id="app"&gt;
  
      &lt;!--articles--&gt;
      &lt;div class="row" style="background: #111; padding: 8em 0; width: 50%;"&gt;
              &lt;div class="ctr"&gt;
                  &lt;div class="row articles page_content" style="padding: 0;"&gt;
                      &lt;ul&gt;
                          &lt;li v-for="(post) in displayedPosts" @click="getSingle(post.id)"&gt;
                              &lt;router-link :to="{ path: '/post/'+ post.id}" class="flex" &gt;
                                  &lt;div class="row article_thumb"&gt;
                                      &lt;img :src="post.url" :alt="post.title"/&gt;
                                  &lt;/div&gt;
                                  &lt;div class="row article_excerpt"&gt;
                                      &lt;h3 class="title"&gt;{{post.title }}&lt;/h3&gt;
                                  &lt;/div&gt;
                              &lt;/router-link&gt;
                          &lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/div&gt;
                  &lt;div class="row pagination"&gt;
                      &lt;button type="button" v-if="page != 1" @click="page--"&gt; &lt;&lt; &lt;/button&gt;
                      &lt;button type="button" v-for="pageNumber in pages.slice(page-1, page+5)" @click="page = pageNumber"&gt; {{pageNumber}} &lt;/button&gt;
                      &lt;button type="button" @click="page++" v-if="page &lt; pages.length"&gt; &gt;&gt; &lt;/button&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;!--articles--&gt;
  
          &lt;div class="row" style="background: #000; padding: 8em 0; width: 50%;"&gt;
              &lt;div class="flex router"&gt;
                  &lt;router-view&gt;&lt;/router-view&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
  &lt;/div&gt;
  &lt;!--app--&gt;
  </code></pre>
  
  <p>VUE.JS</p>
  
  <pre><code>const Home = {
    template: "&lt;div&gt;&lt;h1&gt;Click an article to update this view&lt;/h1&gt;&lt;/div&gt;"
  };
  
  //post
  var Post = {
    template:
      '&lt;div class="row"&gt;&lt;h1&gt;Display data for Post ID  # {{$route.params.id}} here&lt;/h1&gt;&lt;p style="color: red;"&gt;This is where I am stuck, cant display the post data, see example below.&lt;/p&gt;&lt;p&gt;{{title}}&lt;/p&gt;&lt;/div&gt;',
  
    //post methods
    methods: {
      //get single post
      getSingle: function(id) {
        var self = this;
        this.id = this.$route.params.id;
        this.title = this.title;
        axios
          .get(this.baseUrl, {
            params: {
              id: this.id,
            }
          })
          .then(response =&gt; {
            this.post = response.data;
            this.title = response.data.title;
            console.log(this.title);
            console.log(this.post);
            console.log("You clicked post ID #" + this.id);
          })
          .catch(response =&gt; {
            console.log(error);
          });
      }
    },
    //post methods
  
    //post data
    data() {
      return {
        baseUrl: "https://jsonplaceholder.typicode.com/photos",
        posts: [],
        title: this.title
      };
    },
  
    //post created
    created() {
      this.getSingle(this.$route.params.id);
    },
  
    watch: {
      "$route.params": {
        handler(newValue) {
          const { id } = newValue;
          this.getSingle(id);
        },
        immediate: true
      }
    }
  };
  //post
  
  //router
  const router = new VueRouter({
    routes: [
      { path: "/", component: Home },
      { path: "/post/:id", component: Post }
    ]
  });
  
  //initial state
  var paginationApp = new Vue({
    el: "#app",
    router: router,
    data: {
      posts: [],
      baseUrl: "https://jsonplaceholder.typicode.com/photos",
      page: 1,
      perPage: 2,
      pages: []
    },
  
    //initial state methods
    methods: {
  
      //get single
      getSingle() {},
  
      //get posts
      getPosts() {
        axios
          .get(this.baseUrl)
          .then(response =&gt; {
            this.posts = response.data;
          })
          .catch(response =&gt; {
            console.log(response);
          });
      },
  
      //set pages
      setPages() {
        let numberOfPages = Math.ceil(this.posts.length / this.perPage);
        for (let index = 1; index &lt;= numberOfPages; index++) {
          this.pages.push(index);
        }
      },
  
      //paginate
      paginate(posts) {
        let page = this.page;
        let perPage = this.perPage;
        let from = page * perPage - perPage;
        let to = page * perPage;
        return posts.slice(from, to);
      }
    },
  
    //created
    created() {
      this.getPosts();
    },
  
    //watch
    watch: {
      posts() {
        this.setPages();
      }
    },
  
    //computed
    computed: {
      displayedPosts() {
        return this.paginate(this.posts);
      }
    }
  });
  //initial state
  
  </code></pre>
  
  <p>Or see this codepen for full example <a href="https://codepen.io/flashvenom/pen/YozyMx" rel="nofollow noreferrer">https://codepen.io/flashvenom/pen/YozyMx</a> and be sure to checkout the console log.</p>
  
  <p>My problem is i cannot console log the title or any internal fields of the data object, as I want to be able to add the title etc into the view area.</p>
  
  <p>Any help or pointers would be much appreciated.</p>