title: Declaring-Reactive-Properties in Vue from the documentation example
body: <p>I am trying to create a simple with vue-cli and the router that fetches Covid-19 cases by Country from a JSON object of arrays. This is my first Vue app. However, I keep getting an error about &quot;Declaring Reactive Properties&quot;. I searched dozens of similar errors on many different forums and seemed to do the trick.</p>
  <p>Most of the <a href="https://v2.vuejs.org/v2/cookbook/using-axios-to-consume-apis.html#Alternative-Patterns" rel="nofollow noreferrer">code is from vue.org</a>, except for the JSON link.</p>
  <p>Api.js:</p>
  <pre><code>import axios from &quot;axios&quot;;
  import Vue from &quot;vue&quot;;
  
  new Vue({
    el: &quot;#app&quot;,
    data() {
      return {
        info: null,
        loading: true,
        errored: false
      };
    },
    template: &quot;&lt;div&gt;{{ output.info }}&lt;/div&gt;&quot;,
    mounted() {
      axios
        .get(&quot;https://pomber.github.io/covid19/timeseries.json&quot;)
        .then(response =&gt; {
          this.info = response.data;
          console.log(this.info);
        })
        .catch(error =&gt; {
          console.log(error);
          this.errored = true;
        })
        .finally(() =&gt; (this.loading = false));
    }
  });
  
  export default {
    name: &quot;About&quot;,
    props: {
      loading: String,
      errored: String,
      info: String
    }
  };
  </code></pre>
  <p>About.js</p>
  <pre><code>&lt;template&gt;
  </code></pre>
    
  <pre><code>&lt;h1&gt;Covid-19 cases by Country&lt;/h1&gt;
  
  &lt;section v-if=&quot;errored&quot;&gt;
    &lt;p&gt;
      We're sorry, we're not able to retrieve this information at the moment,
      please try back later
    &lt;/p&gt;
  &lt;/section&gt;
  
  &lt;section v-else&gt;
    &lt;div v-if=&quot;loading&quot;&gt;Loading...&lt;/div&gt;
  
    &lt;div v-else v-for=&quot;data in info&quot; :key=&quot;data&quot; class=&quot;currency&quot;&gt;
      &lt;h1&gt;{{ data.Portugal[0].deaths }}&lt;/h1&gt;
    &lt;/div&gt;
  &lt;/section&gt;
  </code></pre>
    
  
  <p>Error:</p>
  <blockquote>
  <p>[Vue warn]: Property or method &quot;errored&quot; is not defined on the
  instance but referenced during render. Make sure that this property is
  reactive, either in the data option, or for class-based components, by
  initializing the property</p>
  </blockquote>
  <p>I can see the warning 3 times, for each of the props errored, loading and info, the most important one.</p>