Vue.js(Nuxt.js)で親にデータがわたらない

前提・実現したいこと

Vue.js(Nuxt.js)でアプリの画面を作っているのですが、親となるレイアウトで出し分けをしたく思い、各画面ごと(例：/pages/index.vueなど)で出し分けのための値を設定して親に渡したいと考えています。

発生している問題・エラーメッセージ

現状は、親にわたっていないため、表示の出し分けができていない状況です。
ソースは以下。この場合、trueを与えているので、footerButtonコンポーネントを出したいがfooterButton2コンポーネントが出てしまう。

該当のソースコード

・親レイアウト

js
1<template>
2  <div>
3    <step />
4    <nuxt />
5    <footerButton v-if="footer" />
6    <footerButton2 v-else />
7  </div>
8</template>
9
10<script>
11import step from '~/components/header/stepper.vue'
12import footerButton from '~/components/footer/footerButton.vue'
13import footerButton2 from '~/components/footer/footerButton2.vue'
14export default {
15  components: {
16    step,
17    footerButton,
18    footerButton2
19  }
20}
21</script>
22

・各画面(まだ大枠だけ)

js
1<template lang="html">
2  <div class="">
3  </div>
4</template>
5
6<script>
7export default {
8  created () {
9    this.$parent.footer = true
10  }
11}
12</script>
13
14<style lang="scss" scoped>
15</style>
16