Как добавить класс нажатому элементу?

Вместо общего isActive добавьте такое свойство каждому элементу в arr, и меняйте его:

<div v-for="(n, i) in arr" class="block-calculations__panel">
  <span
    :data-col="i"
    :class="{ active: n.isActive }"
    @click="n.isActive = !n.isActive"
  ></span>
</div>

UPD. А, так вам надо, чтобы активным мог быть только один элемент... Переименуйте isActive в просто active, это будет индекс кликнутого элемента. Класс назначайте в случае равенства текущего индекса и active:

<div v-for="(n, i) in arr" class="block-calculations__panel">
  <span
    :data-col="i"
    :class="{ active: active === i }"
    @click="active = active === i ? null : i"
  ></span>
</div>

<div class="block-calculations__panel" v-for=" (i, index) in arr ">
        <span :data-col="index" @click="isActive =i" v-bind:class="isActive==i?'active':''"></span> 
    </div>

view