Current better practice

Author: pablobm

addon/components/stripe-element.js

@@ -6,11 +6,16 @@ export default Component.extend({
   classNames: ['ember-stripe-element'],
 
   autofocus: false,
-  options: computed(() => ({})),
+  options: null,
   stripeElement: null,
   stripeError: null,
   type: null, // Set in components that extend from `stripe-element`
 
+  init() {
+    this._super(...arguments);
+    set(this, 'options', {});
+  },
+
   stripev3: service(),
   elements: computed(function() {
     return get(this, 'stripev3.elements')();

tests/dummy/app/controllers/application.js

@@ -1,6 +1,6 @@
 import Controller from '@ember/controller';
 import { inject as service } from '@ember/service';
-import { computed, get, set } from '@ember/object';
+import { get, set } from '@ember/object';
 
 let style = {
   style: {
@@ -24,15 +24,14 @@ export default Controller.extend({
   stripev3: service(),
 
   token: null,
+  cardOptions: null,
+  options: null,
 
-  cardOptions: computed(() => ({
-    hidePostalCode: true,
-    style
-  })),
-
-  options: computed(() => ({
-    style
-  })),
+  init() {
+    this._super(...arguments);
+    set(this, 'cardOptions', { hidePostalCode: true, style });
+    set(this, 'options', { style });
+  },
 
   actions: {
     submit(stripeElement) {