How to overwrite Boolean value in props?

Question

Vue.js

Hi all! Help the teapot))

When clicking on the BUTTON button, a block with the "lorem" class should open.
But instead, I get an error in the console

TypeError: 'set' on proxy: trap returned falsish for property 'isOpen'
at Object.onClick._cache.._cache .

And 2 WARNING

Attempting to mutate prop "isOpen". Props are readonly.

Unhandled error during execution of native event handler
at
at

My code in App.vue

<template>
  <div class="container pt-1">
    <div class="card">
      <h2>Актуальные новости {{ now }}</h2>
    </div>
    <app-news
      v-for="item in news"
      :key="item.id"
      :title="item.title"
      :id="item.id"
      :is-open="item.isOpen"
    ></app-news>
  </div>
</template>

<script>
import AppNews from "./AppNews";
export default {
  data() {
    return {
      now: new Date().toLocaleDateString(),
      news: [
        {
          title: "Джо Байден победил на выборах США",
          id: 1,
          isOpen: false,
        },
        {
          title: "Vue  3 успешно работает",
          id: 2,
          isOpen: false,
        },
      ],
    };
  },
  components: {
    "app-news": AppNews,
  },
};
</script>

My code in AppNews.vue

<template>
  <div class="card">
    <h3>{{ title }}</h3>
    <button class="btn" @click="isOpen = !isOpen">Открыть</button>
    <p v-if="isOpen" class="lorem">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. A quos et quaerat
      deserunt similique omnis. Quae fugit aperiam, labore sed cumque tenetur
      nihil harum facere amet earum non sunt delectus.
    </p>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      required: true,
    },
    id: {
      type: Number,
      required: true,
    },
    isOpen: {
      type: Boolean,
      required: false,
      default: false,
    },
  },
  data() {
    return {
      // isOpen: false,
    };
  },
};
</script>

Answer 1

Replace
:is-open="item.isOpen"with v-model:is-open="item.isOpen"
isOpen = !isOpenwith$emit('update:isOpen', !isOpen)

Answer 2

Props are read-only values. Write props to date and change it

data() {
    return {
      isOpenProps: this.isOpen,
    };
  },