Is it possible to use VueJs instead of Jquery in Yii2 projects?

Question

Yii

Hello!
I wanted to use VueJs in my Yii2 project.
I build builds with Webpack, but this is the first project in which I chose Vuejs over jQuery.
Therefore, the question arises: Am I doing it right, connecting the library, using Vue templates, etc.
For
example, let's say there is a list of news in the front, which I display with php

// news.php
<?php
 $news = [
   ["id" => 1, "name" => "News 1"],
   ["id" => 2, "name" => "News 2"],
   ["id" => 3, "name" => "News 3"],
   ["id" => 4, "name" => "News 4"]
 ];
?>
<h1>News</h1>
<div id="app">
  <? foreach ($news as $item): ?>
    <h1
      @click="openDialog(<?=$item['id']?>)"
    >Name: <?=$item["name"];?></h1>
  <? endforeach; ?>
</div>

// index.js
import Vue from './modules/vue.min';

document.addEventListener("DOMContentLoaded", function(event) {
  new Vue({
    el: '#app',
    data: {
      name: 'News list'
    },
    methods: {
      openDialog(id){
        console.log("ID: ", id);
      }
    },
    mounted(){
      console.log("VUE START");
    }
  });
});

the code works as i want....but
am i doing it right?
Maybe there is a better option for this .... tell me please.

And by the way, there is one problem. The source code is displayed like this
. I think this is not very good. Will SEO be a problem?

<div id="app">
      <h1
      @click="openDialog(1)"
    >Name: News 1</h1>
      <h1
      @click="openDialog(2)"
    >Name: News 2</h1>
      <h1
      @click="openDialog(3)"
    >Name: News 3</h1>
      <h1
      @click="openDialog(4)"
    >Name: News 4</h1>
  </div>

Answer 1

Use NUXT (SSR) for SEO. And use Yii as an API.