Filings UI: re-architect filings to reduce duplicated code

In [9530](https://app.zenhub.com/workspaces/entities-team-space-6143567664fb320019b81f39/issues/bcgov/entity/9530), the AR/COA/COD/CORR components were updated to support FAS payment errors. The SonarCloud Code Analysis check for that work failed due to excessive code duplication since these components are similar -- and always have been but they were just touched, so the code analysis complained now.

I do not know of any easy or clean solutions to this issue, but I did a bit of research and it appears some solutions are becoming available. This ticket is to find and implement a suitable solution.

The problem: The subject filing components share some HTML code, Typescript code, and styling code. It would be ideal to have a "base component" containing these common items and then to extend that into child components that contains the differences for each filing type. But Vue doesn't provide a comprehensive solution.

Possible solutions / reading:
- https://www.npmjs.com/package/vue-template-extends?activeTab=readme
- https://github.com/SasanFarrokh/vue-slot-loader
- https://github.com/mrodal/vue-inheritance-loader
- https://github.com/vuejs/composition-api
- https://vuejsdevelopers.com/2017/06/11/vue-js-extending-components/
- https://github.com/vuejs/vue/issues/6811
- https://littlelines.com/blog/2020/03/13/extending-vue-components

Start by locating the AR, COA, COD, and CORR filing components and compare their shared HTML, TypeScript, and styling code. Review the linked Vue extension and composition-api resources, then determine a suitable architecture. Done means duplicated code is reduced and the SonarCloud Code Analysis check passes.

Written by the indexing model from the issue text.