webapp业务流程基本一致，多套主题管理，并且有不断有新增主题，该如何设计组件化架构？

Question

业务场景

一套单页应用，由于需要接入到不同的合作方，因此需要对ui进行调整，有时需要变更一些交互，但整个流程基本一致。

目前打算用vue重构项目，已将公共的业务逻辑抽离成业务层，但编写页面级组件时发现，依然存在大部分可复用代码，例如在登录页面上：

 // viewModel｛ 
    phoneNum, smsCode, loginbtn
 }

对于每个版本都存在，基本上可以用一套viewmodel去描述这个业务流程，我认为这部分重复代码是可复用。

对于每次新增的版本而言，大多数改动的是样式，少量的交互（也存在动很多交互，但具体业务逻辑流程不变）。

曾经考虑：

方案一：

1.分割viewmodel到各子组件，构建该页面时，引用这些业务组件拼凑，添加／修改样式；
2.子组件间事件通信或动态注册data。
3.交互变更大，新增某个子组件。

但是，一般应该先有ui组件，再有业务组件，此处设计是先有业务组件，再有ui组件。

方案二：

1.先编写ui组件
2.再编写viewmodel对应的流程逻辑
3.引用ui组件，mixin对应逻辑

思路十分凌乱，还请各位给点意见，谢谢。