I have a parent component (item-list) to which I pass items from a PHP view (Laravel/Blade). The item-list consists of list-items (child component). Inside a list-item I want to modify/delete this specific item. After triggering the deletion inside the child component, an event will be emitted back to parent component where the item will be finally removed from the items list.

It seems like this approach is not reactive. If I instead use data() with some dummy data for the list items of a prop filled via PHP, it's reactive.

How can I guarantee reactivity for props passed via PHP?

Parent component:

    <template>
    
      <my-list-item
        v-for="item of items"
        :key="item.id"
        :item="item"
        @remove="removed"
      ></my-list-item>
      <br />
    
    
    </template>
    
    <script>
    
    import MyListItem from './my-list-item'
    
    export default {
    
      // parent component
      name: "my-list",
      components: {
        MyListItem
      },
    
      data() {
        return {
    
          // this will work. items are reactive
    
          // items: [
          //
          //   { id: 1, message: 'foo' },
          //   { id: 2, message: 'bar' },
          //
          // ]
        }
      },
    
      props: {
    
        // not reactive, items come from PHP view (Laravel/Blade).
        items: {
          type: Array,
          default: undefined
        }
      },
      methods: {
        removed: function (item) {
          _.remove(this.items, item);
        }
      }
    };
    </script>

Child component:

<template>

  <!-- item stuff here (label, etc.)
    ...
  -->

  {{ item.message }}

  <!-- remove link -->
  <a href="#" @click="remove(item)">remove</a>
</template>

<script>

// child
export default {
  name: "my-list-item",

  props: {
    item: {
      type: Object,
    }
  },

  emits: [
    'remove'
  ],

  methods: {

    remove: function (item) {
      this.$emit("remove", item);
    }
  },
};
</script>

PHP view (list.blade.php):

@extends('dashboard')
@section('title', 'List items')

@section('content')
  <my-list :items="{{ Session::get('items') }}"></my-list>
@endsection