here is my code. At first I render index.blade.php which includes discussions.blade.php from a controller and it renders the entire page with my app.js where I am registering and mounting component and its renders.

//discussions.blade.php

    

        

            @foreach($dto->discussions as $discussion)
                

                    title}}"
                        username="{{$discussion->username}}"
                        date="{{$discussion->date}}"
                        slug="{{$discussion->slug}}"
                    >
                
            @endforeach
        
    
    

//app.js
import {createApp} from 'vue/dist/vue.esm-bundler';
import SignupForm from './components/SignupForm.vue';
import LoginForm from './components/LoginForm.vue';
import DiscussionFilter from './components/DiscussionFilter.vue'

const app = createApp({});
app.component('signup-form',SignupForm);
app.component('login-form',LoginForm);
app.component('discussion-filter',DiscussionFilter);
app.mount('#app'); //#app goes from layouts/app.blade.php

Fragment of my DiscussionFilter.vue where I am sending ajax to another controller which renders only discussions.blade.php

axios.get('/discussions/filter',{params:data})
     .then((response) => {
            $('#discussions-wrapper').html(response.data);
     }).catch((error) => console.log(error));

Problems is that template from controller renders my data in page but Vue component doesn’t renders. It seems I need something like re render or re mount. But how I can achieve this?