Magento – Overriding template files in own theme, loaded through JS (Knockout.js)

There is seems to be a conflict because below layout you have already mentioned the template of element and re-defined the template in your component js file also,

vendor/mytheme/Magento_Checkout/layout/checkout_index_index.xml

<!-- the field you are customizing -->
<item name="telephone" xsi:type="array">
    <item name="component" xsi:type="string">Magento_Checkout/js/view/masked</item>
        <item name="config" xsi:type="array">
        <!-- Assigning a new template -->
        <item name="elementTmpl" xsi:type="string">Magento_Checkout/form/element/telefone</item>
    </item>
</item>

Hence try replace below component script with your, vendor/mytheme/web/js/view/masked.js

define([
    'underscore', 'ko',
    'mageUtils',    
    'Magento_Ui/js/form/element/abstract',
    'uiLayout'
], function (_, ko, utils, Abstract, layout) {
    'use strict';

    return Abstract.extend({
        initialize: function () {
            this._super();

            //add your custom code or call custom functions
            ko.bindingHandlers.maskedInput = {
                init: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
                ko.bindingHandlers.value.init(element, valueAccessor, allBindings, viewModel, bindingContext);
                },
                update: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
                    ko.bindingHandlers.value.update(element, valueAccessor, allBindings, viewModel, bindingContext);
                    $(element).mask(allBindings.get('mask'));
                    valueAccessor()($(element).val());
                }
            };

            var ViewModel = function() {
                this.phone = ko.observable("");
                this.phone('123123451212');
            }; 
            ko.applyBindings(new ViewModel());

            return this;
        }            
    });
});

Note : script extends from Magento_Ui/js/form/element/abstract

Did you want to add loader into templates/cart/totals.phtml These some ways to add loader spinner into block or page.

1 Use: <div data-bind="blockLoader: isLoadding"> /** Block Content HTML */ </div>,

with this option you should add isLoadding : ko.observable(false) into your Component

Example: Block XML Define

<block class="Magento\Framework\View\Element\Template" name="block-name"
                       template="Namespace_ModuleName::templates.phtml">
    <arguments>
        <argument name="jsLayout" xsi:type="array">
            <item name="components" xsi:type="array">
                <item name="scope_name" xsi:type="array">
                    <item name="component" xsi:type="string">Namespace_ModuleName/js/componentjsfile</item>
                </item>
            </item>
        </argument>
    </arguments>
 </block>

Block templates.phtml CODE

<div id="abc-def" data-bind="scope: 'scope_name'">
    <div class="product-wizard-selections" data-bind="blockLoader: isLoading">
        <div class="cart table-wrapper">
               HTML CONTENT
        </div>
    </div>
</div>

Script

<script type="text/x-magento-init">
    {
        "#abc-def": {
              "Magento_Ui/js/core/app":  <?php /* @escapeNotVerified */ echo $block->getJsLayout(); ?>
        }
    }
</script>

Javascript code: Namespace_ModuleName/js/componentjsfile

define([
    'uiComponent',
    'ko'
], function (Component, ko){
    return Component.extend({
        defaults: {
            addToCartTitle: 'Add To Cart'
        },
        isLoading: ko.observable(false),
        initObservable: function () {
              this._super();
              this.isLoading(true);
        }
    });
});

2: With <div class="loader"> using rjsResolver

js file named "Namespace_ModuleName/js/abc"

define([
    'rjsResolver',
], function (resolver) {
    'use strict';

    /**
     * Removes provided loader element from DOM.
     *
     * @param {HTMLElement} $loader - Loader DOM element.
     */
    function hideLoader($loader) {
        let defaultValue = this;
        $loader.parentNode.removeChild($loader);
    }

    /**
     * Initializes assets loading process listener.
     *
     * @param {Object} config - Optional configuration default data after loaded component
     * @param {HTMLElement} $loader - Loader DOM element.
     */
    function init(config, $loader) {
        resolver(hideLoader.bind(config, $loader));
    }

    return init;
});

PHTML file

<div id="block-loader-id" data-role="abc-loader" class="loading-mask" data-mage-init='{"Namespace_ModuleName/js/abc": {}}'>
    <div class="loader">
        <img src="<?= /* @escapeNotVerified */ $block->getViewFileUrl('images/loader-1.gif') ?>"
             alt="<?= /* @escapeNotVerified */__('Loading...') ?>" style="position: absolute;">
    </div>
</div>
<script>
    require([
        'mage/url',
        'Magento_Ui/js/block-loader'
    ], function (url, blockLoader) {
        blockLoader("<?= /* @escapeNotVerified */ $block->getViewFileUrl('images/loader-1.gif') ?>");
        return url.setBaseUrl('<?= /* @escapeNotVerified */ $block->getBaseUrl() ?>');
    });
</script>