记一次vue使用innerHTML更新dom出现的样式失效问题

场景说明：我在实现对html拼接后重新渲染到页面的功能遇到了一点问题，当然实际的业务逻辑并没有这么简单，所以只提出这个问题，而不讨论如何修正；

具体情况：使用refs获取到dom，然后使用innerHTML来更改内容，内容为 html，其样式早已在style中写好，并且使用scoped限制作用域；但是在更改后的内容的样式却并未生效;

具体代码:

　　HTML:

　　　　<div class="test" ref="test">

　　　　　　<p>这是原始内容，颜色为绿色</p>

　　　　</div>

 

　　CSS:

　　　　<style