How to use the ember-metal/observer function in ember-metal

// Disable Button when isLoading equals true
    attributeBindings: ['disabled', 'type', 'tabindex'],

    // Must be set on the controller
    disabled: equal('showSpinner', true),

    click() {
        if (this.get('action')) {
            this.sendAction('action');
            return false;
        }
        return true;
    },

    toggleSpinner: observer('submitting', function () {
        let submitting = this.get('submitting');
        let timeout = this.get('showSpinnerTimeout');
        let delay = testing ? 10 : 1000;

        if (submitting) {
            this.set('showSpinner', true);
            this.set('showSpinnerTimeout', run.later(this, function () {
                if (!this.get('submitting')) {
                    this.set('showSpinner', false);
                }
                this.set('showSpinnerTimeout', null);
            }, delay));
        } else if (!submitting && timeout === null) {
            this.set('showSpinner', false);
        }
    }),

didInsertElement() {
    this._super(...arguments);
    this._setupViewport();
  },

  willDestroyElement() {
    this._super(...arguments);
    const element = get(this, 'element');
    get(this, 'watcher').unwatch(element);
  },

  /**
   * Remove the spaniel watcher when we don't have a nextLink anymore
   */
  _disableWhenLast: observer('nextLink', function() {
    if (isEmpty(get(this, 'nextLink'))) {
      const element = get(this, 'element');
      get(this, 'watcher').unwatch(element);
    }
  }),

  _setupViewport() {
    const element = get(this, 'element');
    spaniel.scheduleWork(() => {
      get(this, 'watcher').watch(element, () => {
        get(this, 'getNextData').perform();
      });
    });
  },

  _getRootMargin() {

let byPath = get(this, 'byPath');

    if (isEmpty(byPath)) {
      defineProperty(this, 'content', []);
      return;
    }

    defineProperty(this, 'content', computed(`array.@each.${byPath}`, 'value', function() {
      let array = get(this, 'array');
      let value = get(this, 'value');

      return emberArray(array).findBy(byPath, value);
    }));
  }),

  contentDidChange: observer('content', function() {
    this.recompute();
  })
});

if (isPresent(value)) {
      if (typeof value === 'function') {
        filterFn = (item) => !value(get(item, byPath));
      } else {
        filterFn = (item) => get(item, byPath) !== value;
      }
    } else {
      filterFn = (item) => isEmpty(get(item, byPath));
    }

    let cp = filter(`array.@each.${byPath}`, filterFn);

    defineProperty(this, 'content', cp);
  }),

  contentDidChange: observer('content', function() {
    this.recompute();
  })
});

import set from 'ember-metal/set';
import { A as emberArray } from 'ember-array/utils';
import { isEmpty } from 'ember-utils';

const { defineProperty } = Ember;

export default Helper.extend({
  compute([byPath, value, array]) {
    set(this, 'array', array);
    set(this, 'byPath', byPath);
    set(this, 'value', value);

    return get(this, 'content');
  },

  byPathDidChange: observer('byPath', function() {
    let byPath = get(this, 'byPath');

    if (isEmpty(byPath)) {
      defineProperty(this, 'content', []);
      return;
    }

    defineProperty(this, 'content', computed(`array.@each.${byPath}`, 'value', function() {
      let array = get(this, 'array');
      let value = get(this, 'value');

      return emberArray(array).findBy(byPath, value);
    }));
  }),

  contentDidChange: observer('content', function() {

import Helper from 'ember-helper';
import observer from 'ember-metal/observer';
import set from 'ember-metal/set';

export default Helper.extend({
  compute([takeAmount, array]) {
    set(this, 'array', array);
    return array.slice(0, takeAmount);
  },

  arrayContentDidChange: observer('array.[]', function() {
    this.recompute();
  })
});

valuesDidChange: observer('arrays.[]', function() {
      this._recomputeArrayKeys();

      let arrays = get(this, 'arrays');
      let arrayKeys = get(this, 'arrayKeys');

      if (isEmpty(arrays)) {
        defineProperty(this, 'content', []);
        return;
      }

      defineProperty(this, 'content', multiArrayComputed(...arrayKeys));
    }),

    contentDidChange: observer('content.[]', function() {
      this.recompute();
    }),

    _recomputeArrayKeys() {
      let arrays = get(this, 'arrays');

      let oldArrayKeys = get(this, 'arrayKeys') || [];
      let newArrayKeys = arrays.map(idForArray);

      let keysToRemove = oldArrayKeys.filter((key) => {
        return newArrayKeys.indexOf(key) === -1;
      });

      keysToRemove.forEach((key) => set(this, key, null));
      arrays.forEach((array) => set(this, idForArray(array), array));

export default function(multiArrayComputed) {
  return Helper.extend({
    compute([...arrays]) {
      set(this, 'arrays', arrays.map((obj) => {
        if (isEmberArray(obj)) {
          return emberArray(obj);
        }

        return obj;
      }));

      return get(this, 'content');
    },

    valuesDidChange: observer('arrays.[]', function() {
      this._recomputeArrayKeys();

      let arrays = get(this, 'arrays');
      let arrayKeys = get(this, 'arrayKeys');

      if (isEmpty(arrays)) {
        defineProperty(this, 'content', []);
        return;
      }

      defineProperty(this, 'content', multiArrayComputed(...arrayKeys));
    }),

    contentDidChange: observer('content.[]', function() {
      this.recompute();
    }),

}).readOnly(),

    compute([needle, option, haystack]) {
      if (isEmpty(haystack)) {
        haystack = option;
        option = null;
      }

      set(this, 'needle', needle);
      set(this, 'haystack', haystack);
      set(this, 'option', option);

      return get(this, 'content');
    },

    contentDidChange: observer('content', function() {
      this.recompute();
    })
  });
}

export default Helper.extend({
  content: computed('num', 'array.[]', function() {
    let array = get(this, 'array');
    let num = get(this, 'num');

    return chunk(num, array);
  }),

  compute([num, array]) {
    set(this, 'array', array);
    set(this, 'num', num);

    return get(this, 'content');
  },

  contentDidChange: observer('content', function() {
    this.recompute();
  })
});