alex

var app = new Vue({
  el: '#calculate',
  data: {
    dataFields: []
  },
  computed: {
    totalPrice () {
      return this.dataFields.reduce((acc, n) => {
         return acc += n
      }, 0)
    }
  }
});

<img :src="imgUrl" :alt="imgAlt" class="uni_result-img">

computed: {
  imgUrl() {
    return require(`@/assets/img/${this.result.img}`)
  },
  imgAlt() {
    return `Комплект ${this.result.title}`)
  }
}

Ну все правильно, у вас урл /orders/123/edit попадает по маску :orderId/:shop? поэтому и рендерится всегда одно и тоже. Попробуйте этом маршрут в последним определить в массиве children, после edit и copy

1. что значит регистировать? куда регистировать? где регистировать? вы о чем? пример приведите. можно хоть десять инстансов на странице сделать.
2. бред какой-то. почему не может то? вы конфиг компонента передаете в .component(). опция data является частью конфига.

но не содержит data

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

во-первых не
:class="active: isActive"
а
:class="{active: isActive}"

во-вторых вы же вкурсе что у вас там два инстанса? если да, то нужно вот так сделать

const barVM = new Vue({
  el: '#bar',
  data: {
    isActive: false
  }
})

new Vue({
  el: '#toggle',
  methods: {
    show: function() {
      barVM.isActive = true
    }
  }
})

вот такое можно сделать

import axios from 'axios';
    export default {
        data:function(){
            return{
                subs:null,
                posts:null,
                tags:null,
            }
        },
        beforeRouteEnter(_, __, next) {
          axios.get('/api/getindexdata').then(response => {
            next(vm => {
              vm.subs = response.data.subs;
              vm.posts = response.data.posts;
              vm.tags = response.data.tags;
            })
          });
        }
    }

<span :class="note.info"></span>

const router = new Router({
  mode: 'history',
  base: '/dash/vue/',
  routes: [{
    path: '/home',
    alias: '/',
    name: 'home'.
    component: HomePage
  }, {
    name: 'test',
    path: '/test',
    component: TestPage
  }]
})

сервер в свою очередь должен на :/dash/vue/**/* отдавать всегда index.html

<input @change="selEvent($event.target.checked)" type="radio">

methods: {
  selEvent(checked) {
    if (checked) {
      alert('play')
    }
  }
}

можно сделать через роутер. храните title в meta. далее ставите плагин vuex-router-sync, он создает в vuex модуль в котором хранит даные о текущем роуте. в туллбаре просто мапите стэйт. примерно так:

// router.js
routes: [{
  name: 'index',
  path: '/',
  meta: {
    title: 'Vuetify.js'
  }
}]


//Toolbar.vue
computed: {
  ...mapState('router', {
    currentTitle: state => state.meta.title
  })
}

если у вас нет vuex, то можно все сделать через watch:

//Toolbar.vue
data() {
  return {
    currentTitle: ''
  }
},
watch: {
  '$route': {
    handler(route) {
      this.currentTitle= route.meta.title
    },
    immediate: true
  }
}

<button v-on:click="modal(product.body)">

modal: function (data) {
  this.product.about = data
},

<modal v-html="product.about">

src/components/AppSidebar.vue
src/components/AppFooter.vue

src/pages/Index.vue
src/pages/About.vue

обычно, наличие клиентского роутинга подразумевает, что сервер на любой url должен отдавать один и тот же index.html. потом, уже на клиенте в этом index.html инициализируется клиентский роутер и в зависимости от url'a в адресной строке браузера показывает юзеру тот или иной интерфейс или данные(страницы 404 и подобные, также завязаны на клиентском роутере). серверный роутинг в даном случае может применяться для создания endpointo'в для API.

cookie, localstorage, vuex

Схема такая: клиент(Vue) --> серверное апи(ваш язык) --> бд(MySQL).

Клиент делает запросы к апи, апи делает запрос к бд, бд отвечает апи, апи отвечает клиенту. Запросы к апи делать с помощью ajax, для реалтайм данных можно юзать вебсокеты

попробуйте result[index].answer сделать массивом

//App.vue

<template>
  <div id="app">
    <router-link to="/random/12323jlwe">12323jlwe</router-link>|
    <router-link to="/random/cxz98c7zf8a">cxz98c7zf8a</router-link>|
    <router-link to="/random/90cvuiwa-r">90cvuiwa-r</router-link>
    <section class="content">
      <router-view :key="$route.fullPath"></router-view>
    </section>
  </div>
</template>

//main.js

import Vue from "vue";
import Router from "vue-router";
import App from "./App.vue";

Vue.use(Router);

var testComponent = Vue.component("main-section", {
  template: `<component :is="template"></component>`,
  data() {
    return {
      template: Vue.compile("<div>please stand by</div>")
    };
  },
  created() {
    // axios.post...
    setTimeout(() => {
      this.template = Vue.compile(`<div>${this.$route.fullPath}</div>`);
    }, 2000);
  },
  mounted() {
    console.log("mounted-" + new Date().getTime());
  }
});

const router = new Router({
  mode: "history",
  routes: [{ path: "/random/:random", component: testComponent }]
});

/* eslint-disable no-new */
new Vue({
  el: "#app",
  router,
  render: h => h(App)
});

https://codesandbox.io/s/50v0xwyzv4

• $el.querySelector('.block__child')
  
• refs
  

export default {
  data() {
    return {
      counter: 10
    }
  },
  methods: {
    countDown() {
      if (this.counter) {
        return setTimeout(() => {
          --this.counter
          this.countDown()
        }, 1000)
      }

      this.$router.push({ path: '/2'})
    }
  },
  mounted() {
    this.countDown();
  }
}