如何实现切换tab的时候左边的区域只有数据发生变化不会跟着tab切换而切换

我用的是element-ui组件库

实现这样的效果

a里面的内容固定在页面上，上面的数据跟着tab切换而改变，b随着tab切换而切换
谢谢帮助！

保存以下代码到html，直接执行即可


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标签切换</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui@2.15.13/lib/theme-chalk/index.css">
    <style>
        #app{
            width: 1200px;
        }
        .box{
            display: flex;
        }
        .box-item-1{
            width: 100px;
        }
        .box-item{
            width: 50%;
            margin-left: 20px;
        }
    </style>
</head>
<body>
<div id="app">
    <el-radio-group v-model="activeTag">
        <el-radio-button label="1">标签1</el-radio-button>
        <el-radio-button label="2">标签2</el-radio-button>
        <el-radio-button label="3">标签3</el-radio-button>
        <el-radio-button label="4">标签4</el-radio-button>
    </el-radio-group>
    <div class="box">
        <div class="box-item-1">
            <el-card class="box">区域A</el-card>
        </div>
        <div class="box-item">
            <el-card class="box" v-show="activeTag === '1'">内容1</el-card>
            <el-card class="box" v-show="activeTag === '2'">内容2</el-card>
            <el-card class="box" v-show="activeTag === '3'">内容3</el-card>
            <el-card class="box" v-show="activeTag === '4'">内容4</el-card>
        </div>
    </div>
</div>

<script src="https://unpkg.com/vue@2.7.14/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui@2.15.13/lib/index.js"></script>
<script>
  new Vue({
    el: '#app',
    data() {
      return {
        activeTag: '1'
      };
    }
  })
</script>
</body>
</html>

页面给我下 ,我看下你咋写的 ,这个很简单啊