Understand Scopes in ES6 modules and functions

Question

I am trying to set up an ES6 environment with some libraries installed via nmp. This all works as charm and now I try to make a drag-able dashboard working with the npm package draggable.

Setup looks like that:

<div id="container" data-module="Grid">
 <div class="ball green"></div>
 <div class="ball red"></div>
</div>

sadasd

import $ from 'jquery';
import Draggable from 'draggable';
import { forEach, find, filter, reduce } from 'lodash';

export default class Grid
{
  constructor($select) {

    this.grid = {
        options: [],
    };

    this.$container = document.getElementById('container');
    this.$element1 = document.getElementsByClassName('ball')[0];
    this.$element2 = document.getElementsByClassName('ball')[1];

    console.log(this.$element1);
    console.log(this.$element2);

    var options = {
        limit: this.$container,
        grid: 200,
        setCursor: true,
        onDragEnd: this.update
    };

    this.drag  = new Draggable(this.$element1, options);
    this.drag2 = new Draggable(this.$element2, options);

    this.upGrid(0, 0);
  }

  update(elem, x, y) {
    console.log($(elem));
    console.log(x+'/'+y);
    this.upGrid(x, y);
  }

  upGrid(x, y) {
    console.log(this.drag.get());
    this.grid.options.push(x+'/'+y);
    console.log(this.grid.options);
  }
}

The problem: The function update is defined to be called by a draggable element at the end of a drag event. This works but the function has no access to the grid variable created in the constructor. And it also does not know about the function upGrid(). I guess it is because it somehow lives within the draggable-package.

Can someone please help me to understand why and how I can manage the scopes of these functions?

Thanks in advance