How to control the flow of vue application - vue.js

Question

I'm trying to make a game using vue and I designed the following structure:
<template>
<div v-if="status==='beforegamestart'" key="beforegamestart">
<button v-on:click="startGame()">Start</button>
</div>
<div v-else-if="status==='inprocess'" key="inprocess">
<h1>Game in process</h1>
<button v-on:click="finishGame()">Finish</button>
</div>
<div v-else-if="status==='gameover'" key="gameover">
<h2>Game over</h2>
</div>
<div v-else>
<h1>Else</h1>
</div>
</template>
<script>
export default {
name: 'GameComponent',
data() {
return {
status: 'beforegamestart'
}
},
methods: {
startGame: function() {
this.status = "inprocess";
},
finishGame: function() {
this.status = "gameover";
}
}
}
</script>
<style>
</style>
I wonder what is the common way to make a game like flappy bird in vue, which has a start menu, game in process, and a finish view? Is it OK to do it in this way? I just wonder how to change different views properly.

Answer 1

If I was was you, I'd do the following:
Step 1: Split the start, in-progress, and game-over screens into their own components. and import them into App.vue(or whatever you want) like so:
import Start from './Start.vue'
import Game from './Game.vue'
import GameOver from './GameOver.vue'
Step 2: Use a dynamic component in the template. See https://v2.vuejs.org/v2/guide/components.html#Dynamic-Components
<component :is="currentState"/>
Step 3: Have a method/computed property(or for bonus points, use vuex) that handles the current state of the game and have to components render based on that value.
computed: {
currentState: function() {
switch(status){
case "beforeGameStart":
return "Start";
break;
...
}
}
}