求助！踩坑css@media print 固定横纵向来回切换无效，到底是什么导致了这个BUG？？

问题：

最近在vue开发中遇到了这样一个功能，希望打印的时候采用两种样式，即打印页面可以在横向和纵向之间来回切换，并且打印的内容有所差异，就是下列这样，点击纵向出现一版，点击横向出现另一版

过程：

我的第一想法很简单，就是写两种样式，然后再点击时分别通过@page { size: portrait; }和@page { size: landscape; }给初始化时纸张横纵向定下来就好了，但是在此过程中遇到了一个令我百思不得其解的问题，即当我第一次点击纵向预览(如下列图一)，和横向预览(如下列图二)，没有任何问题。
但是！！当我再次点击纵向预览时，出现了BUG！(如下列图三所示)，纸张没有调整为横向，它被固定为纵向了！此后无论怎么点击，纸张横纵向都不会变化

思考：

当真是神奇，我以为是复用的问题，为其绑定key值，无效，分写两个组件，无效。
虽然可以不固定横纵向，让其手动在右侧选择，但我还是很想知道，求助！究竟是什么导致了这个BUG