What I am trying to do is similar to question in here
Main reason for me to have this approach is that my application has a plugin system, so some plugins gets installed at a later time. Each plugin have it's own resources including vuejs logic. Therefore I can't have pre-compiled vuejs like a traditional SPA.
The current approach works well and suitable for my overall architecture and is maintainable as well. However there is something that I came across which I can't understand.
That is if I want to cache a view component that uses tag helper, after it's being sent to browser vuejs doesn't seem to recompile any vuejs related views inside the cached content. For example;
<cache expires-after="@TimeSpan.FromDays(1)">
@await Component.InvokeAsync("SiteHeader")
</cache>
Now site header ViewComponent has vuejs in razor like;
<script at="Foot" type="text/x-template" id="vue-user-feedback">
//all html vuejs stuff here
</script>
The first time it loads and works, but then next time page loads these components are missing from the browser. If I remove the <cache/> it works fine.
Is it because the <cache/> instructs the browser to keep the data in browser cache or server as pre rendered html? Even if it's so; once it's loaded to browser shouldn't vuejs be able to find them and recompile?