Input values becomes clear when I click on checkbox

[Sogl]

Hello!

I have component like this:

<template>
    <fragment>
        <div class="level">
        </div>

        <form :action="formAction" method="POST">
        <div class="columns is-multiline">

            <div class="column is-6">
                <input type="text" class="input" name="display_name" 
:value="displayName" id="display_name">
            </div>

            <div class="column is-6">
                <div class="field" v-for="permission in permissions">
                    <b-checkbox type="is-info" v-model="permissionsSelected" 
:native-value="permission.id">{{ permission.display_name }} 
<small>({{ permission.description }})</small></b-checkbox>
                </div>
            </div>

        </div>
        </form>
    </fragment>
</template>

<script>
    export default {
        props: ['formAction', 'displayName', 'permissions'],
        data: () => ({
            permissionsSelected: []
        }),
    }
</script>

And I put it on my page in Laravel blade file:

<roles-create
    form-action="{{ route('roles.store') }}"
    display-name="{{ old('display_name') }}"
    :permissions="{{ $permissions }}">
</roles-create>

And when I put value in display_nameinput and after that click on checkbox (no matter checked or not), my input becomes clear! (Old value works as initial value. For example I put fff and send form and after reload I see fff, but when I change value to fffddd and check checkbox, my input becomes fff again.) I change <fragment> root element to <div> and all works fine.

Any ideas how to fix?

[Sogl]

UPDATE. Ok, seems it's not related to vue-fragment library, it's about strange input rerender...

[Sogl]

Change :value to v-model solved my problem 😉 Issue related to Vue component render/rerender system.