VsCode内でVue.jsの特定タグ記述時に、予測変換が機能しない

Question

前提・実現したいこと

Vscodeを使用して、Vue.jsとPythonのFlaskを利用した簡単なWebアプリケーションを作成しています。
Vscode内で特定のタグを記述した時に予測変換が効かなくなる現象を解消したいです。

発生している問題・エラーメッセージ

Vscode内の、”{% raw %} {% endraw %}” のVue.jsステートメント内で予測変換が機能しなくなりました。
上記ステートメント内は、コメントアウトと同じ配色になります。

※プログラムは問題なく動作します。

該当のソースコード

ソースコード

{% extends "layout.html" %}

{% block title %}
Index
{% endblock %}

{% block headline %}
{{title}}
{% endblock %}

{% block content %}

<div class="mb-3" id="msg">{{ message }}</div> <!-- Vue.js container --> <div id="app" class="m-5"> <mycomp/> </div> <!-- mycomp's template -->

// この部分から
{% raw %}

<script type="text/x-template" id="mycomp-template"> <div> <p class="alert alert-primary h5"> {{msg}} </p> </div> </script>

{% endraw %}
// ここまで

<!-- Vue.js script --> <script> // mycomp object Vue.component( 'mycomp',{ template: '#mycomp-template', data:function(){ return{msg:"This is Mycomp-component!!"}; } }); // start Vue. new Vue({ el:'#app', }); </script>

{% endblock %}

{% block footer %}
copyright 2021 TAKUYA-Kumade.
{% endblock %}

試したこと

Vue.jsに関する拡張パッケージの不足かと思い、下記をインストールしましたが改善しませんでした。
Vue.js Extension Pack
Vetur
Vue.peek
Vue docs

補足情報（FW/ツールのバージョンなど）

Vscodeバージョン: 1.57.1 (user setup)
Chrome: 89.0.4389.128
Node.js: 14.16.0