title: vuejs props are undefined after refresh
body: <p>App.vue</p>
  <p>template:</p>
  <pre><code>&lt;ResponsiveNavigation
    :nav-links=&quot;navLinks&quot;
  /&gt;
  </code></pre>
  <p>script</p>
  <pre><code>data: () =&gt; ({
    navLinks: []
  }),
  
  created: function() {
    this.getSocialNetworks();
  },
  
  methods: {
      getSocialNetworks() {
        var self = this;
  
        axios
          .get(MY_API_URL)
          .then(function(res) {
            var fb_url = res.data.data.filter(obj =&gt; {
              return obj.key === &quot;Social_Facebook&quot;;
            });
            self.navLinks.fb = fb_url[0].defaultValue;
            //
            var ig_url = res.data.data.filter(obj =&gt; {
              return obj.key === &quot;Social_Instagram&quot;;
            });
            self.navLinks.ig = ig_url[0].defaultValue;
            //
          })
          .catch(function(error) {
            console.log(&quot;Error&quot;, error);
          });
      }
    }
  </code></pre>
  <p>ResponsiveNavigation.vue:</p>
  <pre><code>&lt;a :href=&quot;$props.navLinks.fb&quot;&gt;&lt;/a&gt;
  </code></pre>
  <p>if I console.log the <code>$props.navLinks</code> I have everything stored.</p>
  <p>however in the href doesn't work after the FIRST load.</p>