在 razor 视图中实现 可复用的组件 遇到的问题

最近尝试在 razor 视图中使用vue, 尝试的过程有点跌宕起伏了,
只尝试了一个列表页面, 编辑/预览页面,只有一个空页面
先大概贴一下代码结构:
模板页:
模板页面主要是 对 vue axios element 等 js css 的引用

列表页:

编辑/预览页面

编辑预览页 对应的 js 文件

目前的结构是个人摸索出来的 , 不知道有没有大佬有更好的 方案…

目前这里有个问题:
编辑页面的 取消按钮的事件 在调用父页面"handleOnDestroy"方法时, 如果时小写可以调用, 如果有大写,则无法调用:
控制台会打印如果消息:
Event “handleondestroy” is emitted in component but the handler is registered for “handleOnDestroy”. Note that HTML attributes are case-insensitive and you cannot use v-on to listen to camelCase events when using in-DOM templates. You should probably use “handle-on-destroy” instead of “handleOnDestroy” .

为什么要用razor 去实现呢?
为了支持history路由?

不是 已经时一个成熟(mvc)的项目了, 目前只是想修改一下前端的页面(之前的页面比较丑…).

我们以前也是razor,后来全面改成vue。但前提是为了解决前后端分离,人员招聘问题。
如果只是页面丑,改css和结构就可以了。element的ui也漂亮不到哪去啊