How to display data with Vue js?

Question

JavaScript

Good to everyone!
I'm trying to display data from a database using Vue js.

<div class="container">
  <h1>My Tasks</h1>

  <tasks list="{{ json_encode($tasks) }}" v-on:parse="getParsed"></tasks>
</div>

<template id="tasks-template">
  <div>   
    <ul class="list-group">
      <li class="list-group-item" v-for="task in list">@{{ task.id }}</li>
    </ul>
  </div>
</template>

$tasks- a variable containing data from the database.

Vue.component('tasks', {
  template: '#tasks-template',

  props: ['list'],

  created: function () {
    this.$emit('parse', this.list);    
  }
});

new Vue({
  el: '.container',

  data: {
    list: {}
  },

  methods: {
    getParsed: function ($parsedList) {
      this.list = JSON.parse($parsedList);      
    }
  }
});

As a result, I get an infinite list:
prntscr.com/gyj2do outputs a json string:
<pre>@{{ list }}</pre>

spoiler

[{"id":1,"body":"Temporibus laudantium iste necessitatibus culpa quo voluptas. Fugiat voluptatibus aut vitae nemo ad consectetur qui. Fuga aperiam ullam asperiores quibusdam tempore repellat. Quos et quis est. Debitis quia excepturi pariatur unde numquam consequuntur autem.","completed":0,"created_at":"2017-10-16 17:27:56","updated_at":"2017-10-16 17:27:56"},{"id":2,"body":"Fugiat officiis et nostrum nihil nam. Rerum nam et est expedita quis vitae reprehenderit. Sit aut magnam omnis sed. Id voluptatum incidunt doloribus delectus rerum enim. Aut non ut assumenda perspiciatis temporibus rerum.","completed":0,"created_at":"2017-10-16 17:27:56","updated_at":"2017-10-16 17:27:56"},{"id":3,"body":"Aut est corrupti praesentium ipsam et et. Porro reprehenderit ut aut soluta tempora voluptatem saepe. Voluptas voluptas cumque et.","completed":0,"created_at":"2017-10-16 17:27:56","updated_at":"2017-10-16 17:27:56"},{"id":4,"body":"Minima id et rerum voluptas. Similique sed repellendus et eum sed. Voluptas sit quisquam autem et voluptas nobis sed. Dolores ullam ea sit atque. Voluptatem consequatur ut vitae cum.","completed":0,"created_at":"2017-10-16 17:27:56","updated_at":"2017-10-16 17:27:56"},{"id":5,"body":"Rerum magni est et impedit. Voluptas accusamus assumenda totam quae provident ipsa. Velit voluptatum ab reprehenderit qui numquam. Recusandae consequatur laborum corrupti sed asperiores error velit.","completed":0,"created_at":"2017-10-16 17:27:56","updated_at":"2017-10-16 17:27:56"},{"id":6,"body":"Voluptatem ducimus et ea adipisci quibusdam quibusdam et. Ea ut necessitatibus voluptatem veniam adipisci laudantium quia. Natus est saepe cumque minus est molestiae.","completed":0,"created_at":"2017-10-16 17:27:56","updated_at":"2017-10-16 17:27:56"},{"id":7,"body":"Rem dolorum et rerum vitae. Qui nesciunt numquam sed voluptas. Nihil mollitia velit repellendus sed amet aut id. Quo ex cumque voluptate officiis et necessitatibus iure.","completed":0,"created_at":"2017-10-16 17:27:56","updated_at":"2017-10-16 17:27:56"},{"id":8,"body":"Aut modi id vel eos quod. Aperiam ad est et perspiciatis. Incidunt error aspernatur et. At alias ullam temporibus expedita et.","completed":0,"created_at":"2017-10-16 17:27:56","updated_at":"2017-10-16 17:27:56"},{"id":9,"body":"Dolor necessitatibus qui neque placeat est. Cum ad atque quo amet et quae et ut. Et dolores eaque tenetur corporis officia aut magni. Odit ipsa consequatur voluptatem quisquam sed est et.","completed":0,"created_at":"2017-10-16 17:27:56","updated_at":"2017-10-16 17:27:56"},{"id":10,"body":"Sit necessitatibus error nostrum. Dolor quia et iste qui pariatur id. Harum pariatur excepturi ut soluta architecto rerum id.","completed":0,"created_at":"2017-10-16 17:27:56","updated_at":"2017-10-16 17:27:56"}]

console.log(this.list);prints the object:
https://prnt.sc/gyivf0
Vue Devtools sees the object as just a string:
prntscr.com/gyiw32

Answer 1

To remove emitfrom the child component, v-onfrom the parent - this is just garbage code that does not do any useful work. Parameter list- replace static value transfer with dynamic one: :list="{{ json_encode($tasks) }}". So the passed value will be considered not as a string, but as a javascript expression - JSON.parseno need to apply.