title: [Vue warn]: Error in render: "TypeError: _vm.activity.activity is undefined"
body: <p>I have this VueJS component that is giving me the error <code>[Vue warn]: Error in render: "TypeError: _vm.activity.activity is undefined"</code></p>
  
  <pre><code>&lt;template&gt;
    &lt;div class="activity box"&gt;
      &lt;h1&gt;{{activity.activity.title}}&lt;/h1&gt;
      &lt;div&gt;
  
      &lt;/div&gt;
  
      &lt;h2&gt;{{activity}}&lt;/h2&gt;
    &lt;/div&gt;
  
  &lt;/template&gt;
  
  &lt;script&gt;
  let activity = {}
  
  export default {
    data () {
      return {
        activity
      }
    },
    methods: {},
    created: function () {
      this.$store.dispatch('show_activity', {params: {id: this.$route.params.id}}).then(activity =&gt; {
        this.activity = activity.data
  
      }, response =&gt; {
  
      })
    }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>The line <code>&lt;h1&gt;{{activity.activity.title}}&lt;/h1&gt;</code> is causing the error. If I change it to <code>&lt;h1&gt;{{activity}}&lt;/h1&gt;</code> the page loads fine. The strange thing is the first one actually loads the title on the page just fine but the JS error raised causes other js on the page to not run properly. <code>activity</code> is a JSON object loaded from <code>vuex_rest_api</code></p>
  
  <p>I can't work out why this line is raising an error when it renders fine. </p>