title: Created() is not executing after delete. Inertia + Vuejs
body: <p>I'm new with Vuejs and Inertia. I've created a simple dashboard using both and Laravel.
  Everything works well except after delete an element, created() is not executing. Surely I'm making a mistake, but I don't found it.</p>
  <p>Example:
  Initial page:
  <a href="https://i.stack.imgur.com/Hsv2Z.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Hsv2Z.png" alt="Initial page" /></a></p>
  <p>If I press 'editar', I can edit the value.
  I edit first value, 17 to 18.
  <a href="https://i.stack.imgur.com/uOLve.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/uOLve.png" alt="Edit page" /></a></p>
  <p><a href="https://i.stack.imgur.com/CVy0g.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/CVy0g.png" alt="Value updated" /></a></p>
  <p>And this works well. But if I want to delete the first element. The table is updated, because it depends from a prop (elements), but the elements below depend with created().</p>
  <p>After removing:
  <a href="https://i.stack.imgur.com/l4t27.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/l4t27.png" alt="Removing element" /></a></p>
  <p>Index.vue</p>
  <pre><code>&lt;div class=&quot;mb-6 bg-white rounded-md shadow&quot; v-if=&quot;elementsFiltrats[0].elements.length != 0&quot;&gt;
    &lt;h2 class=&quot;pressupost_gastos_h2&quot;&gt;General&lt;/h2&gt;
  
    &lt;ul class=&quot;pressupost_gastos_ul&quot;&gt;
       &lt;li v-for=&quot;e in elementsFiltrats[0].elements&quot; :key=&quot;e.id&quot; class=&quot;hover:bg-gray-100 focus-within:bg-gray-100 pressupost_gastos_li&quot;&gt;
        {{e.nom}} - {{e.valor.toFixed(2)}}€
       &lt;/li&gt;
    &lt;/ul&gt;
  
    &lt;h3 class=&quot;pressupost_gastos_h3&quot;&gt;Total: {{elementsFiltrats[0].valor_total.toFixed(2)}}€ (+10%) = {{(elementsFiltrats[0].valor_total*1.10).toFixed(2)}}€&lt;/h3&gt;
  &lt;/div&gt;
  
  export default {
    metaInfo: { title: 'Presupuestos' },
    components: {
      Icon,
      Pagination,
      SearchFilter,
    },
    layout: Layout,
    props: {
      filters: Object,
      exercici: Object,
      elements: Array,
      comunitat: Object,
      elementsagrupats: Array
    },
    data() {
      return {
        form: {
          search: this.filters.search
        },
        elementsFiltrats: []
      }
    },
    created(){
      this.splitByType()
    },
    watch: {
      form: {
        deep: true,
        handler: throttle(function() {
          this.$inertia.get(this.route('pressuposts', this.exercici.id), pickBy(this.form), { preserveState: true })
        }, 150),
      },
      '$route' : 'splitByType'
    },
    methods: {
      reset() {
        this.form = mapValues(this.form, () =&gt; null)
      },
      destroy(idExercici, idPressupost) {
        if (confirm(&quot;Seguro que quieres eliminar el elemento del presupuesto?&quot;)) {
          this.$inertia.delete(this.route('pressuposts.destroy', [idExercici, idPressupost]))
        }
      },
      edit(idExercici, idPressupost) {
        this.$inertia.get(this.route('pressuposts.edit', [idExercici, idPressupost]))
      },
      splitByType(){
        console.log(&quot;hola&quot;)
        // 0 general
        // 1 escales
        // 2 garatge
        // valor_total
        var elem = [
          {
            'elements' : [],
            'valor_total': 0
          }, 
          {
            'elements' : [],
            'valor_total': 0
          }, 
          {
            'elements' : [],
            'valor_total': 0
          }
        ];
  
        this.elementsagrupats.forEach(element =&gt; {
          var pos = 0;
          if(element.casella === 'general'){
            pos = 0;
          }else if(element.casella === 'escales'){
            pos = 1;
          }else{
            pos = 2;
          }
  
          elem[pos].elements.push({
            'nom' : element['nom'],
            'valor' : element['valor_total']
          });
          elem[pos].valor_total += element.valor_total;
        });
  
        this.elementsFiltrats =  elem;
  
      }
  
    },
  }
  </code></pre>
  <p>Controller:</p>
  <p>Update method has:</p>
  <p>Update code...</p>
  <pre><code>return Redirect::route('pressuposts', $exercici-&gt;id)-&gt;with('success', 'Element actualitzat.');
  </code></pre>
  <p>Destroy method has:</p>
  <p>Delete code...</p>
  <pre><code>return Redirect::route('pressuposts', $exercici-&gt;id)-&gt;with('success', 'Element eliminat.');
  </code></pre>
  <p>Any help is appreciated.
  Thanks.</p>