artloveyou

Вам стоит для понимания упростить свой код, в общем случае это могло бы выглядеть
так:

<template>
  <div>
    {{ dataFromAPI }}

    тут вызов апи по событию, в вашем случае вы его к чему-нибудь привязываете
    <button @click="getAPI">Get API</button>
  </div>
</template>

<script>
// смешивать jQuery c Vue - плохой вариант, лучше используйте axios
import axios from 'axios'

export default {
  data() {
    return {
      // тут у вас реактивное свойство
      dataFromAPI: null,
    }
  },
  mounted() {
    // тут первый вызов апи при загрузке страницы
    this.getAPI()
  },
  methods: {
    getAPI() {
      return axios
          .get('https://api.your.address')
          .then(response => {
            if (response.data) {
              // когда апи возвращает данные передаем их реактивному свойству
              // и они обновляются без перезагрузки, как вам надо
              this.dataFromAPI = response.data
            }
          })
          // ловим ошибки
          .catch(error => {
            console.log(error);
          })
          .finally(() => {
            // если надо -- дополнительные действия (выключить лоадер, например)
          })
    }
  }
}
</script>

и разобравшись вернуться к тому что вы делаете.

другим слайдером

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

Если php-скрипт консольный, какая разница чем его запускать. Можно и go.

<template>

<input type="number" min=1 max=5 :class="{invalid:userChoice < 1 || userChoice > 5}" v-model="userChoice" />

</template>

<script>
export default {
  data() {
    return {
      userChoice: 1
    }
  }
}
</script>

https://codesandbox.io/s/tender-dream-xxjb7?file=/...

Правда работает, пока стрелками выбор производится, а если вручную заполнять инпут, надо доп проверку пилить

Если так надо


то можно так попробовать

<template>

  <v-text-field some_propses>
    <template v-slot:append>
      <v-icon>Email</v-icon>
    </template>
  </v-text-field>

</template>

<script>
export default {
  data() {
    return {

    }
  }
}
</script>

<style>
.v-text-field > .v-input__control > .v-input__slot {
  background-color: green;
}
</style>

url: window.location.href <- ваша форма шлёт данные по адресу, который у вас в гет-строке,
методом пост method: "POST"
Соответственно по этому же адресу у вас должен быть бэк экшен который принимает пост запрос. А в нем уже забираете (в общем случае через $_POST) эти данные data: {name: name, phone: phone}

sudo apt-get install cmatrix
cmatrix

Более кипучей псевдодеятельности, понятной обывателю, чем в матрице не найти)

Я остановился на таком решении, если кому-то тоже потребуется разделять на отдельные файлы

Тут надо начать со схемы таблицы в файле и схемы таблицы в базе. А так алгоритм примерно такой:
1. Пишется загрузчик файла (или берется готовый)
2. Пишется парсер загруженного файла xls (или берется готовый)
3. Распарсеные параметры подставляются в запрос к базе.

один редирект норм, больше уже плохо

На объектах, которые я создаю без vuex store это работает
https://codesandbox.io/s/vigorous-lake-k5u8p?file=...

let original = {
  foo: 'original',
  bar: {
    a: 1,
    b: 2
  }
};

let clone = {};

for (let key in original) {
  clone[key] = original[key];
}

clone.foo = 'clone'; 

console.log( original ); 
console.log( clone );

С vuex store не работает https://jsfiddle.net/84j5bfg9/2/

<div id="app1">
  <p>{{ count }}</p>
  <p>
    <button @click="increment">+</button>
    <button @click="decrement">-</button>
  </p>
</div>

// make sure to call Vue.use(Vuex) if using a module system

let original = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
  	increment: state => state.count++,
    decrement: state => state.count--
  }
})



// 1
let clone = {};

for (let key in original) {
  clone[key] = original[key];
}


/* 
// 2
var clone = Object.assign({}, original);
 */

console.log( original.state.count ); 
console.log( clone.state.count );


new Vue({
  el: '#app1',
  computed: {
    count () {
	    return clone.state.count
    }
  },
  methods: {
    increment () {
      clone.commit('increment')
    },
    decrement () {
    	clone.commit('decrement')
    }
  }
})

Ну и когда я подключаю lodash.cloneDeep() получаю
Uncaught TypeError: Cannot convert a Symbol value to a string

import Vue from 'vue';
import Vuex from 'vuex';
import VueLodash from 'vue-lodash';
import lodash from 'lodash';

Vue.use(Vuex);
Vue.use(VueLodash, { lodash: lodash });

import App from '../components/copy-calculator/Index.vue';
import myApp from '../store/modules/myApp/myApp';

const store = new Vuex.Store({
    modules: { myApp }
});

// Это работает
// let data = [
//     { id: 1, values: { a: 'a', b: 'b' } },
//     { id: 2, values: { c: 'c', d: 'd' } }
// ];
// let clone = lodash.cloneDeep(data);
// console.log(clone);


const appInstances = document.querySelectorAll('.myApp');
appInstances.forEach((appInstance)=>{

   // Это уже не работает
    let clone = lodash.cloneDeep(store);

    new Vue({
        el: `#myApp_${  appInstance.dataset.id}`,
        clone,
        components: { App },
    });

});

можно перед этим достать всё что в скобках, чтобы возможные цифры в строке не затронуть
\[(.+?)\]
https://regex101.com/r/4hke8S/2