What are 'props' and why is it undefined?

Question

Vue.js

Hello Toaster!
There is a code on Vue + rails through webpacker, vue does not work. Here is the code itself:

import Vue from 'vue'
import TurbolinksAdapter from "vue-turbolinks"
import VueResource from "vue-resource"

Vue.use(VueResource);

document.addEventListener('turbolinks:load', () => {
  
  Vue.http.headers.common["X-CSRF-Token"] = document.querySelector('meta[name="csrf-token"]').getAttribute("content");

  var element = document.getElementById("team-form")

  if(element != null){

  	var team = JSON.parse(element.dataset.team);
  	var players_attributes = JSON.parse(element.dataset.playersAttributes);
  	players_attributes.forEach(function(player){
  		player._destroy = null	
  	})
  	team.players_attributes = players_attributes;

  	var app = new Vue({
  		el: element,
  		mixins: [TurbolinksAdapter],
  		data: function(){
  			return{
  				team: team
  			}
  		},
  		methods: {
  			addPlayer: function(){
  				team.players_attributes.push({
  					id: null,
  					name: "",
  					_destroy: null
  				})
  			}
  		}
  	});
  }
})

Template code:

<%=content_tag :div,
  id: "team-form",
  data: {
    team: team.to_json(except: [:created_at, :updated_at]),
    players_attributes: team.players.to_json(except: [:team_id, :created_at, :updated_at])
  } do %>

  <label>Team name</label>
  <input type="text" v-model="team.name" />

  <h4> Players </h4>
  <div v-for="(player, index) in team.players_attributes">
    {{ index }}
  </div>
  <button v-on:click="addPlayer" > Add player </button>
<% end %>

Error message in browser console (chrome):

Uncaught TypeError: Cannot read property 'props' of undefined
    at normalizeProps (vue.runtime.esm.js?ff9b:1291)
    at mergeOptions (vue.runtime.esm.js?ff9b:1363)
    at mergeOptions (vue.runtime.esm.js?ff9b:1372)
    at Vue$3.Vue._init (vue.runtime.esm.js?ff9b:4268)
    at new Vue$3 (vue.runtime.esm.js?ff9b:4384)
    at HTMLDocument.eval (hello_vue.js?94ab:29) <b>!!!! это и есть наш первый файл</b>
    at Object.t.dispatch (turbolinks.self-1d1fddf91adc38ac2045c51f0a3e05ca97d07d24d15a4dcbf705009106489e69.js?body=1:6)
    at r.t.Controller.r.notifyApplicationAfterPageLoad (turbolinks.self-1d1fddf91adc38ac2045c51f0a3e05ca97d07d24d15a4dcbf705009106489e69.js?body=1:7)
    at r.t.Controller.r.pageLoaded (turbolinks.self-1d1fddf91adc38ac2045c51f0a3e05ca97d07d24d15a4dcbf705009106489e69.js?body=1:6)
    at turbolinks.self-1d1fddf91adc38ac2045c51f0a3e05ca97d07d24d15a4dcbf705009106489e69.js?body=1:6

Answer 1

I don't know why, but after deleting
and adding the line
after Vue.use(VueResource), everything worked.