JastaFly Вы пытаетесь изменить компонент "formOne" на "formTwo" внутри этих компонентов. Так не работает. В :is="componentName" необходимо передавать имя компонента на том же уровне (либо еще выше, но не ниже), что и сам
<component is="name" />
. В Вашем случае достаточно вынести
<div class="form__head">
<span class="form__change" @click="form='formOne'">Форма 1</span>
<span class="form__change" @click="form='formTwo'">Форма 2</span>
</div>
в рутовый компонент.
Либо использовать vuex. В каждом компоненте вызывать мутацию и менять флаг currentForm, например, в сторе. В Рутовом компоненте подключить геттер этого флага и менять директиву is
<template>
<div id="app">
<component :is="current"/>
</div>
</template>
<script>
import Form1 from "./components/Form1.vue";
import Form2 from "./components/Form2.vue";
export default {
name: "app",
components: {
form1: Form1,
form2: Form2
},
computed: {
current() {
return this.$store.getters.current;
}
}
};
</script>
import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
export default new Vuex.Store({
state: {
current: "form1"
},
getters: {
current: (state) => {
return state.current
}
},
mutations: {
setForm(state, payload) {
state.current = payload;
}
},
actions: {
//
}
});