Livewire/Vue Table Nested Tr Component Action Bug

#1

What seems to be the problem:
I have a bug when I have multiple tr as a component loop (flagged with a :key of course).
When I call an action inside of the Child Component view the whole component disappears.
(Note: the child blade view isn’t wrapped with a div, but with a tr)
This whole bug appears when using livewire and vue together (with the livewire-vue plugin).
When I remove the livewire-vue script it works again.
But I need the livewire-vue extension for other views inside of my project, so I can’t remove it

Steps to Reproduce:
Use: vue / livewire / livewire-vue and add nested table-item components with actions.
Here is a playground example with the bug:

Here a version without the livewire-vue plugin (where it’s working)

Are you using the latest version of Livewire:
Livewire 2.3.5
livewire-vue 0.3.1

What I am doing wrong?
Kind Regards Chris

#2

Opened an issue on github: https://github.com/livewire/livewire/issues/2222

It’s because of some dom manipulations inside of the livewire/vue index.js hook.

It removes all td’s and the root tr element.

 const div = document.createElement('div')
    div.innerHTML =  message.response.effects.html

    new window.Vue().$mount(div.firstElementChild)

    message.response.effects.html = div.firstElementChild.outerHTML

A workaround for me is to add this to the index.js (livewire-vue) file inside of the hook:

if (message.response.effects.html.startsWith("<tr")) {
        return;
    }

But with this it won’t be mounted to the Vue component. For me it has no issues. But for others it may break their apps.