For Helium

feeding_suggestions_data.js

class SuggestionsData {
  constructor() {
    this.$CF = document.querySelector('form[data-cf-form]')
    this.liquid_data = JSON.parse(
      document.getElementById('dog_customer_details').innerText
    )
    this.storage = null
    this.init_data()
  }

  save_data(data) {
    window.localStorage.setItem('dog_info', JSON.stringify(data)) 
  }

  load_data() {
    const data = window.localStorage.getItem('dog_info')
    if (data !== null) {
      this.storage = JSON.parse(data)
    }
  }

  eval_storage() {
    if (this.liquid_data.details_available) {
      this.save_data(this.liquid_data)
      this.storage = this.liquid_data
    } else {
      this.load_data()
    }
  }

  get_form_inputs() {
    return Array.from(
      this.$CF.querySelectorAll('[data-cf-input]')
    )
  }

  dispatch_customer_changed() {
    CF.ready(() => { /* eslint-disable-line */ 
      const event = new CustomEvent('cf:customer_changed', {
        detail: {
          changed: CF.customer.data /* eslint-disable-line */ 
        }
      })

      document.dispatchEvent(event)
    })
  }

  set_form_listener() {
    const anonymous_form = this.$CF.getAttribute('data-cf-form') === 'o8btPd' && !this.liquid_data.details_available
    const parsed_data = {}

    if (anonymous_form) {
      CF.ready(() => { /* eslint-disable-line */
        const inputs = this.get_form_inputs()

        CF.customer.save = () => { /* eslint-disable-line */
          return new Promise(resolve => {
            this.save_data(parsed_data)
            resolve()
          })
        }

        this.$CF.addEventListener('submit', () => {
          for (let input of inputs) {
            const field_key = input.getAttribute('data-cf-column-key')
            let value

            switch(field_key) {
              case 'your_dogs_name':
              case 'dietary_needs':
                value = input.value
                break

              default:
                value = Number(input.value)
            }
            parsed_data[field_key] = value
          }

          CF.customer.save() /* eslint-disable-line */
            .then(() => window.location.href = '/collections/feeding-calculated')
        })
      })
    }
  } 

  prepop_forms() {
    if (this.storage !== null) {
      CF.ready(() => { /* eslint-disable-line */
        const inputs = this.get_form_inputs()

        for (let input of inputs) {
          const field_key = input.getAttribute('data-cf-column-key')
          if (this.storage[field_key] !== undefined) {
            CF.customer.set(field_key, this.storage[field_key]) /* eslint-disable-line */
            input.value = this.storage[field_key]
          }
        }
      })
    }
  }

  eval_cForm_page() {
    if (this.$CF !== null) {
      this.set_form_listener()
      this.prepop_forms()
      this.dispatch_customer_changed()
    }
  }

  init_data() {
    this.eval_storage()
    this.eval_cForm_page()
  }

}

export default SuggestionsData

I suggest adding another function on your SuggestionsData class:

dispatch_customer_changed_event() {
  const customer_changed_event = new CustomEvent('cf:customer_changed', { detail: { changed: CF.customer.data } });
  document.dispatchEvent(customer_changed_event);
}

Then, call it inside eval_cForm_page() right after this.prepop_forms().

This works so long as the contents of dispatch_customer_changed_event is a callback passed to CF.ready :D Problem solved.