vuejs2 inline templates and content security policy behavior in asp.net core web app

Question

I know that this issue can be solved if I precompile and use vue.runtime.min.js(If I do a SPA). However, my current user scenario requires that the application is built as modules that can be dynamically loaded (as plugins).

So my asp.net core application has multiple projects where each project is a plugin with it's own logic & views. VueJS templates are declared in razor files such as;

<script type="text/x-template" id="vue-tenant-list-view">
<div>
    <div class="table-responsive">
        <other-vue-components/>
    </div>
    @await Component.InvokeAsync(....)
</div>

All of these are packaged into a zip file and can be deployed to webserver which will load the dlls and rest of the things will work fine.

Since these vuejs parts need to be compiled at run-time (after loaded to browser), instead of using runtime version of vuejs, I use the full version with the compiler. So when I apply CSP policies it complains because (I think) it finds parts within the main document.

To overcome this do I have to add a noonce to every section in the application so it'll look like;

<script type="text/x-template" id="vue-tenant-list-view" nonce="@myhash">
</script>

@myhash will be generated for each request. And then set my CSP header for scripts such as;

script-src 'nonce-{generated-hash}' 'strict-dynamic';

What are my options?