Need evaluation on unexpected behaviour in if statement

I'm making a simple Vue.js app which is a slideshow of images. When a slide item is clicked, it shows a Specification page for that image, and on that same page is a "back" button that's supposed to return the user back to the slideshow.

The way I'm currently doing this is by making a variable "contentVisible" that toggles between false (specification page not visible) and true (specification page visible).

The problem is that the children elements of the parent element that has the if statement attached to it don't show up after the condition toggles. I'm not going to include all of the code, but this is the part which involves my main problem:

<template>
  <div id="home">
    <DeviceSpecification
      v-if="contentVisible"
    />
    <slideshow v-if="!contentVisible">
      <slide>
        <img v-bind:src="slideIMG" />
      </slide>
    </slideshow>
  </div>
</template>

<script>
import DeviceSpecification from "./DeviceSpecification.vue";

export default {
  name: "Home",
  data: function() {
    return {
      contentVisible: false
    };
  },
  methods: {
    toggleSpecVisibility() {
      this.contentVisible = this.contentVisible ? false : true;
    }
  },
  components: { DeviceSpecification }
};
</script>

I would expect for both the parent and the children elements to disappear in a falsy statement, and then for both of them to reappear otherwise. Any help would be appreciated.