Use tabs to use v-model

src/App.vue

@@ -1,7 +1,7 @@
 <template>
 	<div id='app'>
 		<modal-window v-model='showAccountModal'>
-			<tab-view :tabs='["Sign up", "Login"]' name="account" padding='true'>
+			<tab-view :tabs='["Sign up", "Login"]' v-model="showAccountTab" padding='true'>
 				<template slot='Sign up'>
 					<p style='margin-top: 0;'>
 						Sign up to create and post in threads.
@@ -117,16 +117,22 @@
 				set (val) {
 					this.$store.commit('hideModal', 'account');
 				}
+			},
+			showAccountTab : {
+				get (val) { return this.$store.state.tabs.account },
+				set (index) {
+					this.$store.commit({
+						type: 'setTab',
+						tab: 'account',
+						index: index
+					});
+				}
 			}
 		},
 		methods: {
 			setShowAccountModal (index) {
 				this.$store.commit('showModal', 'account');
-				this.$store.commit({
-					type: 'setTab',
-					tab: 'account',
-					index: index
-				});
+				this.showAccountTab = index
 			},
 			cancel () {
 				this.$store.commit('hideModal', 'account');

src/components/InputEditor.vue

@@ -9,7 +9,7 @@
 	>
 		<div class='input_editor__reply_username' v-if='replyUsername'>Replying to <strong>{{replyUsername}}</strong></div>
 		<div class='input_editor__close input_editor__format_button' @click='closeEditor' v-if='!hideClose'>&times;</div>
-		<tab-view :tabs='["Editor", "Preview"]' :name='name' small-tabs='true'>
+		<tab-view :tabs='["Editor", "Preview"]' v-model='showTab' small-tabs='true'>
 			<template slot='Editor'>
 				<div class='input_editor__format_bar'>
 					<div class='input_editor__format_button' @click='replaceSelectedText("**", "**")'>B</div>
@@ -84,7 +84,8 @@
 				linkURL: '',
 				focused: false,
 				linkModalVisible: false,
-				imageModalVisible: false
+				imageModalVisible: false,
+				showTab: 0
 			}
 		},
 		computed: {

src/components/TabView.vue

@@ -26,23 +26,17 @@
 </template>
 
 <script>
-	import mapGetters from 'vuex';
-
 	export default {
 		name: 'TabView',
-		props: ['tabs', 'name', 'padding', 'small-tabs'],
+		props: ['tabs', 'value', 'padding', 'small-tabs'],
 		methods: {
 			changeTab (index) {
-				this.$store.commit({
-					type: 'setTab',
-					tab: this.name,
-					index: index
-				});
+				this.$emit('input', index)
 			}
 		},
 		computed: {
 			tabIndex () {
-				return this.$store.state.tabs[this.name];
+				return this.value
 			}
 		}
 	}