How do I change the style of a node in Vue?

[AK3030]

I am building off of the following example in a Vue project but I am having trouble changing the style of the node. I tried adding a class to each node and then applying a style in vue with ::v-deep but nothing happens. How can I change the styling/background color of a node?

Example: App.vue

<template>
  <div id="app">
    <div id="drawflow"></div>
  </div>
</template>

<script>
import Vue from 'vue'
/*eslint-disable */
import NodeClick from './components/NodeClick.vue'
import Drawflow from 'drawflow'
import styleDrawflow from 'drawflow/dist/drawflow.min.css' // eslint-disable-line no-use-before-define
/*eslint-enable */

export default {
  name: 'App',
  data() {
    return {
      editor: null,
    }
  },
  mounted() {
    const id = document.getElementById("drawflow");
    this.editor = new Drawflow(id, Vue);
    this.editor.start();
    const props = {};
    const options = {};
    this.editor.registerNode('NodeClick', NodeClick, props, options);
    const data = {};
    this.editor.addNode('Name', 0, 1, 150, 300, 'Class', data, 'NodeClick', 'vue');

  },
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
#drawflow {
  width: 100%;
  height: 500px;
  border: 1px solid red;
}
</style>

Component NodeClick

<template>
  <div class="card-devices" >
     <div class="header">
        <h1> Test </h1>
     </div>
    <div class="body" >
       <span @click="Clicked"> Name :</span>
     </div>
  </div>
</template>

<script>
export default {
  methods: {
    Clicked() {
      alert("hello-drawflow");
    }
  }
}
</script>

[jerosoler]

Use in app.vue

.drawflow .drawflow-node { 
background: blue;
}