Home

Issue: 690

Problems with async data in pages template

[issue link]

I’m at /loja/pages/index.vue
This is my code:

<template>
	<div>
	  <template-home></template-home>
	  {{produtos}}
    </div>
</template>

<script>
  import TemplateHome from '~/components/default/Templates/Home'
  import {$get} from '~/.nuxt-helpers/axios';
  import axios from 'axios'

  export default {
    components: {
      TemplateHome
    },
    async asyncData({params}) {
        let { produtos } = await axios.get('http://localhost:3010/api/produtos');
        return {produtos}
    }
     
    
  }
</script>

OK, I get that I cannot use asyncData into layouts or components, but why it keeps returning me [Vue warn]: Property or method "produtos" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option. ?
I’m already using nuxtServerInit to get some initial data to my state, but I think the right way to pass data to components is by props (I might be wrong here).
What I’m doing wrong here?

This question is available on Nuxt.js community (#c593)