Magento 2 - Why do SKU not change dynamically in configurable product view page

I wrote the module based on Fabian Schmengler's solution. This works for me on Magento 2.1.3.

/app/code/YourVendor/YourModule/view/frontend/requirejs-config.js

var config = {
    config: {
        mixins: {
            'Magento_ConfigurableProduct/js/configurable': {
                'YourVendor_YourModule/js/model/skuswitch': true
            }
        }
    }
};

/app/code/YourVendor/YourModule/view/frontend/web/js/model/skuswitch.js

/*jshint browser:true jquery:true*/
/*global alert*/
define([
    'jquery',
    'mage/utils/wrapper'
], function ($, wrapper) {
    'use strict';

    return function(targetModule){

        var reloadPrice = targetModule.prototype._reloadPrice;
        var reloadPriceWrapper = wrapper.wrap(reloadPrice, function(original){
            //do extra stuff

            //call original method
            var result = original();

            //do extra stuff
            var simpleSku = this.options.spConfig.skus[this.simpleProduct];

            if(simpleSku != '') {
                $('div.product-info-main .sku .value').html(simpleSku);
            }


            //return original value
            return result;
        });

        targetModule.prototype._reloadPrice = reloadPriceWrapper;
        return targetModule;
    };
});

/app/code/YourVendor/YourModule/Plugin/Magento/ConfigurableProduct/Block/Product/View/Type/Configurable.php

namespace YourVendor\YourModule\Plugin\Magento\ConfigurableProduct\Block\Product\View\Type;

class Configurable
{

    public function afterGetJsonConfig(
        \Magento\ConfigurableProduct\Block\Product\View\Type\Configurable $subject,
        $result
    ) {

        $jsonResult = json_decode($result, true);

        $jsonResult['skus'] = [];
        foreach ($subject->getAllowProducts() as $simpleProduct) {
            $jsonResult['skus'][$simpleProduct->getId()] = $simpleProduct->getSku();
        }


        $result = json_encode($jsonResult);

        return $result;
    }
}

/app/code/YourVendor/YourModule/etc/di.xml

<?xml version="1.0" ?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
    <type name="Magento\ConfigurableProduct\Block\Product\View\Type\Configurable">
        <plugin disabled="false" name="YourVendor_YourModule_Plugin_Magento_ConfigurableProduct_Block_Product_View_Type_Configurable" sortOrder="10" type="YourVendor\YourModule\Plugin\Magento\ConfigurableProduct\Block\Product\View\Type\Configurable"/>
    </type>
</config>

Feedback is appreciated! I got this by trial&error based on http://alanstorm.com/the-curious-case-of-magento-2-mixins/

I did that once for Magento 2.0, don't have the code available but can show you where you need to make changes:

• Write a Plugin for Magento\ConfigurableProduct\Block\Product\View\Type\Configurable::getJsonConfig() and add the SKUs to the result:

  $config['skus'] = [];
  foreach ($subject->getAllowProducts() as $simpleProduct) {
      $config['skus'][$simpleProduct->getId()] = $simpleProduct->getSku();
  }
  

• Extend Product.Config from app/code/Magento/ConfigurableProduct/view/adminhtml/web/js/configurable.js using RequireJS. A good place to add the code to change the displayed SKU is reloadPrice(). You will have access to the SKUs via this.config.skus