Why don't v-if and v-else blocks hide an object depending on the value?

Question

Vue.js

Hello. I started learning js, html, now I started learning vue.
( I connect vue.js like this:

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

in the head block)
There was a question while studying conditional statements.
Code in html:

<div id="vueElement">
    <button v-on:onclick="status = !status">Скрыть / Показать</button>
    <p v-if="status">Status is true!</p>
    <p v-else>Status is false!</p>
  </div>

js code:

new Vue ({
  el: "vueElement",
  data: {
    status: true
    }
});

When the button is pressed, the status field should change to the opposite value, and when the variable changes and when the site is opened, one of the inscriptions should disappear depending on the value of the field, which does not happen. The console is clean, no errors, no warnings.

Answer 1

el: "vueElement",replace with el: "#vueElement",
<button v-on:onclick="status = !status">replace with<button v-on:click="status = !status">

Answer 2

The isset function returns a bool.
The json_decode function expects a string as input.
Cannot decode bool, returns null.