vue 单选列表, 并且改变样式

N个模板，单选，选中的改变样式（青色的边框）
HTML代码：

 <div>
    <h3 class="tips">请选择模板</h3>
    <ul class="Project-list">
      <li
        class="filter-nav"
        v-for="(item, index) in projectList"
        :key="index"
        @click="ChooseTemplate(index, item)"
      >
        <div class="box1" :class="{ active: clickIndex == index }">
          <img class="img" src="" alt="" />
          <div class="bg-box">
            <span>{{ item.name }}</span>
          </div>
        </div>
      </li>
    </ul>
  </div>

CSS代码：

 .Project-list {
  padding: 0;
  width: 100%;
  margin: 15px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  align-items: center;
}
li {
  list-style: none;
  width: 178px;
  height: 317px;

  border-radius: 4px;
  overflow: hidden;
  flex: 0 0 16.6%;
  margin-bottom: 20px;
}
.box1 {
  width: 178px;
}
img {
  height: 277px;
  width: 100%;
  vertical-align: middle;
}
.bg-box {
  width: 100%;
  background: #f8f8fb;
  font-size: 14px;
  color: #333333;
  height: 36px;
  line-height: 36px;
  padding: 0 6px;
  word-break: break-all;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}

.tips {
  font-size: 16px;
  color: #333333;
  margin-bottom: 15px;
}
.active {
  border: solid 1px #3ee963;
}

script中的代码：

data中定义：  clickIndex: -1,
methods:{
   ChooseTemplate(index, item) {
      this.clickIndex = index;
      console.log(item);
    },
}

略显吐槽的图片展示效果：