Я думаю, что проблема здесь:

<template id="newtemp" :name ="{{user.name}}">

когда вы префикс опоры с : вы указываете Vue, что это переменная, а не строка. Так что вам не нужно {{}} вокруг user.name. Попробуйте:

<template id="newtemp" :name ="user.name">

правка-----

вышеизложенное верно, но большая проблема здесь заключается в том, что при изменении URL-адреса и переходе на новый маршрут исходный компонент исчезает. Чтобы второй компонент редактировал родительские данные, второй компонент будет нужно быть дочерним компонентом первого или просто частью одного и того же компонента.

лучший способ отправить данные из родительского компонента в дочерний-это использовать реквизит.

передача данных от родителя к ребенку через props

• объявить props (массив или объект) в детей
• передайте его ребенку через <child :name="variableOnParent">

см. демо ниже:

Vue.component('child-comp', {
  props: ['message'], // declare the props
  template: '<p>At child-comp, using props in the template: {{ message }}</p>',
  mounted: function () {
    console.log('The props are also available in JS:', this.message);
  }
})

new Vue({
  el: '#app',
  data: {
    variableAtParent: 'DATA FROM PARENT!'
  }
})

<script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>

<div id="app">
  <p>At Parent: {{ variableAtParent }}</p>
  <child-comp :message="variableAtParent"></child-comp>
</div>

Я нашел способ передать родительские данные в область компонентов в Vue, я думаю, что это немного хак, но, возможно, это поможет вам.

1) ссылочные данные в экземпляре Vue как внешний объект (data : dataObj)

2) затем в функции возврата данных в дочернем компоненте просто верните parentScope = dataObj и вуаля. Теперь вы не можете делать такие вещи, как {{ parentScope.prop }} и будет работать как шарм.

Удачи!

глобальная переменная JS (объект) может использоваться для передачи данных между компонентами. Пример: передача данных из Ammlogin.vue к вариантам.Ву. В Аммлогине.vue rspData устанавливается в ответ от сервера. в настройках.vue ответ от сервера становится доступным через rspData.

.html:

<script>
    var rspData; // global - transfer data between components
</script>

Ammlogin.vue:

....    
export default {
data: function() {return vueData}, 
methods: {
    login: function(event){
        event.preventDefault(); // otherwise the page is submitted...
        vueData.errortxt = "";
        axios.post('http://vueamm...../actions.php', { action: this.$data.action, user: this.$data.user, password: this.$data.password})
            .then(function (response) {
                vueData.user = '';
                vueData.password = '';
                // activate v-link via JS click...
                // JSON.parse is not needed because it is already an object
                if (response.data.result === "ok") {
                    rspData = response.data; // set global rspData
                    document.getElementById("loginid").click();
                } else {
                    vueData.errortxt = "Felaktig avändare eller lösenord!"
                }
            })
            .catch(function (error) {
                // Wu oh! Something went wrong
                vueData.errortxt = error.message;
            });
    },
....

параметры.vue:

<template>
<main-layout>
  <p>Alternativ</p>
  <p>Resultat: {{rspData.result}}</p>
  <p>Meddelande: {{rspData.data}}</p>
  <v-link href='/'>Logga ut</v-link>
</main-layout>
</template>
<script>
 import MainLayout from '../layouts/Main.vue'
 import VLink from '../components/VLink.vue'
 var optData = { rspData: rspData}; // rspData is global
 export default {
   data: function() {return optData},
   components: {
     MainLayout,
     VLink
   }
 }
</script>