[Vuejs]-Can't access droppable() in Vue component

I’ve managed to get this working. It seems as though I wasn’t reference the diagram variable correctly. This works:

Vue.component('design', {
props: ['user'],

/**
 * The component's data.
 */
data() {
    return {
        diagram: [],
    };
},

mounted() {
    // Get the canvas
    let self = this;
    var canvas = $(".canvas");
    var resource = $(".resource");

    // enable drag on the resources
    resource.draggable({
        helper: "clone"
    });

    // configure droppable on the canvas
    canvas.droppable({
        // define allowed elements
        accept: resource,

        // configure the drop event
        drop: function(event, ui) {
            // create object for dropped element
            var node = {
                _id: (new Date).getTime(),
                position: ui.helper.position(),
            };

            // repaint left due to sidebar position
            node.position.left -= canvas.position().left;

            // Append type to object
            if (ui.helper.hasClass("test")) {
                node.type = "test";
            }
                return;
            }

            // push the element onto the diagram array
            self.diagram.push(node);
            render();
        }
    });

    // Define the render function to add resources to the diagram
    function render() {
        // Here we empty the canvas so we can re-draw it
        canvas.empty();

        // Traverse the resource array and action
        self.diagram.forEach(r => {
            // Grab the individal node
            var node = r;

            // Creat empty html variable
            var html = "";

            // Here we generate our html for when the element has been dropped
            if (node.type === 'test') {
                html = "<h3>Test</h3>"
            }

            // Generate the css for the dom element
            var dom = $(html).css({
                "position": "absolute",
                "top": node.position.top,
                "left": node.position.left
            })
                // Configure draggable of dropped items
                .draggable({
                    stop: function(event, ui) {
                        var id = ui.helper.attr("id");

                        for (var i in self.diagram) {
                            if (self.diagram[i]._id == id) {
                                self.diagram[i].position.top = ui.position.top;
                                self.diagram[i].position.left = ui.position.left;
                            }
                        }

                        // render();
                    }
            }).attr("id", node._id);

            // Append the dom element to the canvas
            canvas.append(dom);
        })
    }
}
});

Also, as an added note here: I was noticing poor performance with the drag and drop. Disabling the transitions as follows fixed this:

ul.projects li:not(.ui-sortable-helper) {
   float: left;
   margin: 0px 6.5px 12px;
   cursor: pointer;
   -webkit-transition: all 0.2s linear;
   -moz-transition: all 0.2s linear;
   -ms-transition: all 0.2s linear;
   -o-transition: all 0.2s linear;
   transition: all 0.2s linear;
}

Finally, here is the HTML I’m working with (bootstrap 4):

<div class="container-fluid" style="height:100vh;">
        <div class="row" style="height:100%;">
            <div class="col-md-3">
                <h3 class="test resource">AWS Instance</h3>
            </div>
            <div class="canvas col-md-9">
                {{--Things here--}}
            </div>
        </div>
    </div>