VueJS - How to display a component if the checkbox is checked?

I'm a beginner in front-end (with VueJS) and I'm looking to display several components with a checkbox. For example, if the checkbox "LogBook" is checked, I would like to display the compoment "Logbook". I managed to get what I wanted with v-model and v-if but I'm not sure it's the right method. I get "Value should be trueValue or falseValue" when I click on the displayed component.

If you have any ideas...

import MyComponent from "~/components/MyComponent";

export default {
  data() {
    return {
      checkedMyComponent: false,
    };
  },
  components: {
    MyComponent,
  },
};

<MenuItem name="1-1">
  <Checkbox v-model="checkedMyComponent">Display My Component</Checkbox>
</MenuItem>

<Layout>
  <Content :style="{padding: '24px', minHeight: '280px', background: '#fff'}">
    <MyComponent v-model="checkedMyComponent" v-if="checkedMyComponent === true"/>
  </Content>
</Layout>