title: apply dynamic CSS class from a computed in vue.js on top of other conditional classes
body: <p>I have this  <code>div</code> in my <code>Field.vue</code> component template:</p>
  
  <pre><code>&lt;div class="field"
      :class="{
        'has-bomb': field.hasBomb &amp;&amp; field.isOpen,
        'is-open': field.isOpen,
        'is-marked': field.isMarked
      }"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Now I have a computed that creates a String based on <code>field.x</code> and <code>field.y</code> like this:</p>
  
  <pre><code>computed: {
    cssClass () {
      return `x${this.field.x}-y${this.field.y}`
    }
  }
  </code></pre>
  
  <p>How can I add that generated String as a CSS class to my div?</p>
  
  <p>I tried </p>
  
  <pre><code>&lt;div class="field"
      :class="{
        'has-bomb': field.hasBomb &amp;&amp; field.isOpen,
        'is-open': field.isOpen,
        'is-marked': field.isMarked,
        cssClass
      }"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>and also</p>
  
  <pre><code>&lt;div class="field"
      :class="{
        'has-bomb': field.hasBomb &amp;&amp; field.isOpen,
        'is-open': field.isOpen,
        'is-marked': field.isMarked,
        cssClass: true
      }"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>but that just gives me</p>
  
  <pre><code>&lt;div class="field cssClass"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>instead of what I need, e.g.:</p>
  
  <pre><code>&lt;div class="field x3-y10"&gt;&lt;/div&gt;
  </code></pre>